From db740c82fc9d41e3e7dc4ac60964323386c0862e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=9C=E5=86=BB=E6=A9=99?= <shifeng199307@gmail.com>
Date: Fri, 8 Nov 2024 11:20:34 +0800
Subject: [PATCH 1/7] feat(cssvar): Migrate cssvar features of antd v5.13.2
version (#7220)
* feat(cssinjs): update cssinjs to v1.18.1
* feat(theme): update theme dir to V5.12.5
* feat(theme&configprovider): update cssvar to v5.12.5
* feat(site): add site cssvar example
* feat(cssinjs): update cssinjs to v1.81.2
* feat(theme): update theme dir to V5.13.2
* fix: component ComponentToken export
* fix: cssvar in the component being loaded multiple times.
* feat(button): add cssvar to the Button component.
---
components/_theme/context.ts | 112 ++++
components/_theme/getDesignToken.ts | 17 +
components/_theme/index.ts | 33 +
components/_theme/interface/alias.ts | 632 ++++++++++++++++++
components/_theme/interface/components.ts | 137 ++++
components/_theme/interface/index.ts | 44 ++
components/_theme/interface/maps/colors.ts | 598 +++++++++++++++++
components/_theme/interface/maps/font.ts | 139 ++++
components/_theme/interface/maps/index.ts | 46 ++
components/_theme/interface/maps/size.ts | 74 ++
components/_theme/interface/maps/style.ts | 43 ++
components/_theme/interface/presetColors.ts | 32 +
components/_theme/interface/seeds.ts | 279 ++++++++
components/_theme/internal.ts | 51 ++
components/_theme/themes/ColorMap.ts | 20 +
.../themes/compact/genCompactSizeMapToken.ts | 19 +
components/_theme/themes/compact/index.ts | 27 +
.../_theme/themes/dark/colorAlgorithm.ts | 9 +
components/_theme/themes/dark/colors.ts | 54 ++
components/_theme/themes/dark/index.ts | 49 ++
.../_theme/themes/default/colorAlgorithm.ts | 9 +
components/_theme/themes/default/colors.ts | 54 ++
components/_theme/themes/default/index.ts | 53 ++
components/_theme/themes/seed.ts | 81 +++
.../_theme/themes/shared/genColorMapToken.ts | 100 +++
.../_theme/themes/shared/genCommonMapToken.ts | 19 +
.../_theme/themes/shared/genControlHeight.ts | 13 +
.../_theme/themes/shared/genFontMapToken.ts | 44 ++
.../_theme/themes/shared/genFontSizes.ts | 22 +
components/_theme/themes/shared/genRadius.ts | 59 ++
.../_theme/themes/shared/genSizeMapToken.ts | 17 +
components/_theme/useToken.ts | 160 +++++
components/_theme/util/alias.ts | 207 ++++++
components/_theme/util/calc/CSSCalculator.ts | 87 +++
components/_theme/util/calc/NumCalculator.ts | 54 ++
components/_theme/util/calc/calculator.ts | 33 +
components/_theme/util/calc/index.ts | 11 +
.../_theme/util/genComponentStyleHook.ts | 458 +++++++++++++
components/_theme/util/genPresetColor.ts | 35 +
components/_theme/util/getAlphaColor.ts | 29 +
components/_theme/util/maxmin.ts | 14 +
components/_theme/util/statistic.ts | 85 +++
components/_theme/util/useResetIconStyle.ts | 35 +
components/_util/_cssinjs/Cache.ts | 32 +
components/_util/_cssinjs/Keyframes.ts | 19 +
components/_util/_cssinjs/StyleContext.tsx | 194 ++++++
components/_util/_cssinjs/extractStyle.ts | 82 +++
.../_util/_cssinjs/hooks/useCSSVarRegister.ts | 153 +++++
.../_util/_cssinjs/hooks/useCacheToken.tsx | 254 +++++++
.../hooks/useCompatibleInsertionEffect.tsx | 30 +
.../hooks/useEffectCleanupRegister.ts | 8 +
.../_util/_cssinjs/hooks/useGlobalCache.tsx | 111 +++
components/_util/_cssinjs/hooks/useHMR.ts | 34 +
.../_util/_cssinjs/hooks/useStyleRegister.tsx | 484 ++++++++++++++
components/_util/_cssinjs/index.ts | 62 ++
.../_util/_cssinjs/linters/NaNLinter.ts | 10 +
.../_cssinjs/linters/contentQuotesLinter.ts | 25 +
.../_cssinjs/linters/hashedAnimationLinter.ts | 15 +
components/_util/_cssinjs/linters/index.ts | 7 +
.../_util/_cssinjs/linters/interface.ts | 9 +
.../linters/legacyNotSelectorLinter.ts | 33 +
.../linters/logicalPropertiesLinter.ts | 88 +++
.../_cssinjs/linters/parentSelectorLinter.ts | 15 +
components/_util/_cssinjs/linters/utils.ts | 13 +
components/_util/_cssinjs/theme/Theme.ts | 38 ++
components/_util/_cssinjs/theme/ThemeCache.ts | 135 ++++
.../_util/_cssinjs/theme/createTheme.ts | 26 +
components/_util/_cssinjs/theme/index.ts | 4 +
components/_util/_cssinjs/theme/interface.ts | 5 +
.../_util/_cssinjs/transformers/interface.ts | 5 +
.../transformers/legacyLogicalProperties.ts | 173 +++++
.../_util/_cssinjs/transformers/px2rem.ts | 77 +++
.../_util/_cssinjs/util/cacheMapUtil.ts | 91 +++
.../_util/_cssinjs/util/css-variables.ts | 58 ++
components/_util/_cssinjs/util/index.ts | 179 +++++
components/_util/hooks/useLayoutEffect.ts | 48 ++
components/affix/style/index.ts | 2 +
components/badge/style/index.ts | 2 +
components/breadcrumb/style/index.ts | 2 +
components/button/button-group.tsx | 6 +-
components/button/button.tsx | 7 +-
components/button/style/compactCmp.ts | 72 ++
components/button/style/group.ts | 13 +-
components/button/style/index.ts | 285 ++++----
components/button/style/token.ts | 234 +++++++
components/config-provider/context.ts | 18 +-
.../config-provider/hooks/useCssVarCls.ts | 15 +
components/config-provider/hooks/useSize.ts | 32 +
components/config-provider/hooks/useTheme.ts | 29 +-
.../config-provider/hooks/useThemeKey.ts | 14 +
components/config-provider/index.tsx | 46 +-
components/config-provider/style/index.ts | 22 +-
components/date-picker/style/index.ts | 2 +
components/descriptions/style/index.ts | 2 +
components/form/style/index.ts | 2 +
components/grid/style/index.ts | 2 +
components/input/style/index.ts | 2 +
components/page-header/style/index.ts | 2 +
components/pagination/style/index.tsx | 2 +
components/statistic/style/index.tsx | 2 +
components/switch/index.tsx | 5 +-
components/switch/style/index.ts | 332 +++++----
components/tree-select/style/index.tsx | 2 +
components/tree/style/index.ts | 2 +
components/vc-util/Dom/dynamicCSS.ts | 33 +-
package.json | 2 +-
site/src/App.vue | 6 +-
.../meta/TokenRelation.ts | 8 +-
.../antdv-token-previewer/meta/interface.ts | 2 +-
.../token-panel-pro/TokenContent.tsx | 2 +-
.../utils/classifyToken.ts | 2 +-
.../utils/getDesignToken.ts | 8 +-
.../antdv-token-previewer/utils/makeStyle.tsx | 6 +-
113 files changed, 7512 insertions(+), 324 deletions(-)
create mode 100644 components/_theme/context.ts
create mode 100644 components/_theme/getDesignToken.ts
create mode 100644 components/_theme/index.ts
create mode 100644 components/_theme/interface/alias.ts
create mode 100644 components/_theme/interface/components.ts
create mode 100644 components/_theme/interface/index.ts
create mode 100644 components/_theme/interface/maps/colors.ts
create mode 100644 components/_theme/interface/maps/font.ts
create mode 100644 components/_theme/interface/maps/index.ts
create mode 100644 components/_theme/interface/maps/size.ts
create mode 100644 components/_theme/interface/maps/style.ts
create mode 100644 components/_theme/interface/presetColors.ts
create mode 100644 components/_theme/interface/seeds.ts
create mode 100644 components/_theme/internal.ts
create mode 100644 components/_theme/themes/ColorMap.ts
create mode 100644 components/_theme/themes/compact/genCompactSizeMapToken.ts
create mode 100644 components/_theme/themes/compact/index.ts
create mode 100644 components/_theme/themes/dark/colorAlgorithm.ts
create mode 100644 components/_theme/themes/dark/colors.ts
create mode 100644 components/_theme/themes/dark/index.ts
create mode 100644 components/_theme/themes/default/colorAlgorithm.ts
create mode 100644 components/_theme/themes/default/colors.ts
create mode 100644 components/_theme/themes/default/index.ts
create mode 100644 components/_theme/themes/seed.ts
create mode 100644 components/_theme/themes/shared/genColorMapToken.ts
create mode 100644 components/_theme/themes/shared/genCommonMapToken.ts
create mode 100644 components/_theme/themes/shared/genControlHeight.ts
create mode 100644 components/_theme/themes/shared/genFontMapToken.ts
create mode 100644 components/_theme/themes/shared/genFontSizes.ts
create mode 100644 components/_theme/themes/shared/genRadius.ts
create mode 100644 components/_theme/themes/shared/genSizeMapToken.ts
create mode 100644 components/_theme/useToken.ts
create mode 100644 components/_theme/util/alias.ts
create mode 100644 components/_theme/util/calc/CSSCalculator.ts
create mode 100644 components/_theme/util/calc/NumCalculator.ts
create mode 100644 components/_theme/util/calc/calculator.ts
create mode 100644 components/_theme/util/calc/index.ts
create mode 100644 components/_theme/util/genComponentStyleHook.ts
create mode 100644 components/_theme/util/genPresetColor.ts
create mode 100644 components/_theme/util/getAlphaColor.ts
create mode 100644 components/_theme/util/maxmin.ts
create mode 100644 components/_theme/util/statistic.ts
create mode 100644 components/_theme/util/useResetIconStyle.ts
create mode 100644 components/_util/_cssinjs/Cache.ts
create mode 100644 components/_util/_cssinjs/Keyframes.ts
create mode 100644 components/_util/_cssinjs/StyleContext.tsx
create mode 100644 components/_util/_cssinjs/extractStyle.ts
create mode 100644 components/_util/_cssinjs/hooks/useCSSVarRegister.ts
create mode 100644 components/_util/_cssinjs/hooks/useCacheToken.tsx
create mode 100644 components/_util/_cssinjs/hooks/useCompatibleInsertionEffect.tsx
create mode 100644 components/_util/_cssinjs/hooks/useEffectCleanupRegister.ts
create mode 100644 components/_util/_cssinjs/hooks/useGlobalCache.tsx
create mode 100644 components/_util/_cssinjs/hooks/useHMR.ts
create mode 100644 components/_util/_cssinjs/hooks/useStyleRegister.tsx
create mode 100644 components/_util/_cssinjs/index.ts
create mode 100644 components/_util/_cssinjs/linters/NaNLinter.ts
create mode 100644 components/_util/_cssinjs/linters/contentQuotesLinter.ts
create mode 100644 components/_util/_cssinjs/linters/hashedAnimationLinter.ts
create mode 100644 components/_util/_cssinjs/linters/index.ts
create mode 100644 components/_util/_cssinjs/linters/interface.ts
create mode 100644 components/_util/_cssinjs/linters/legacyNotSelectorLinter.ts
create mode 100644 components/_util/_cssinjs/linters/logicalPropertiesLinter.ts
create mode 100644 components/_util/_cssinjs/linters/parentSelectorLinter.ts
create mode 100644 components/_util/_cssinjs/linters/utils.ts
create mode 100644 components/_util/_cssinjs/theme/Theme.ts
create mode 100644 components/_util/_cssinjs/theme/ThemeCache.ts
create mode 100644 components/_util/_cssinjs/theme/createTheme.ts
create mode 100644 components/_util/_cssinjs/theme/index.ts
create mode 100644 components/_util/_cssinjs/theme/interface.ts
create mode 100644 components/_util/_cssinjs/transformers/interface.ts
create mode 100644 components/_util/_cssinjs/transformers/legacyLogicalProperties.ts
create mode 100644 components/_util/_cssinjs/transformers/px2rem.ts
create mode 100644 components/_util/_cssinjs/util/cacheMapUtil.ts
create mode 100644 components/_util/_cssinjs/util/css-variables.ts
create mode 100644 components/_util/_cssinjs/util/index.ts
create mode 100644 components/_util/hooks/useLayoutEffect.ts
create mode 100644 components/button/style/compactCmp.ts
create mode 100644 components/button/style/token.ts
create mode 100644 components/config-provider/hooks/useCssVarCls.ts
create mode 100644 components/config-provider/hooks/useSize.ts
create mode 100644 components/config-provider/hooks/useThemeKey.ts
diff --git a/components/_theme/context.ts b/components/_theme/context.ts
new file mode 100644
index 0000000000..46141db260
--- /dev/null
+++ b/components/_theme/context.ts
@@ -0,0 +1,112 @@
+import type { ShallowRef, InjectionKey, ExtractPropTypes, ComputedRef } from 'vue';
+import {
+ defineComponent,
+ inject,
+ provide,
+ shallowRef,
+ unref,
+ triggerRef,
+ watch,
+ computed,
+} from 'vue';
+import type { Theme } from '../_util/_cssinjs';
+import { createTheme } from '../_util/_cssinjs';
+
+import { objectType, someType } from '../_util/type';
+import type { AliasToken, MapToken, OverrideToken, SeedToken } from './interface';
+import defaultDerivative from './themes/default';
+import defaultSeedToken from './themes/seed';
+
+export const defaultTheme = createTheme(defaultDerivative);
+
+// ================================ Context =================================
+// To ensure snapshot stable. We disable hashed in test env.
+const DesignTokenContextKey: InjectionKey<ShallowRef<Partial<DesignTokenProviderProps>>> =
+ Symbol('DesignTokenContextKey');
+
+export const globalDesignTokenApi = shallowRef<DesignTokenProviderProps>();
+
+export const defaultConfig = {
+ token: defaultSeedToken,
+ override: { override: defaultSeedToken },
+ hashed: true,
+};
+
+export type ComponentsToken = {
+ [key in keyof OverrideToken]?: OverrideToken[key] & {
+ theme?: Theme<SeedToken, MapToken>;
+ };
+};
+export const styleProviderProps = () => ({
+ token: objectType<AliasToken>(),
+ theme: objectType<Theme<SeedToken, MapToken>>(),
+ components: objectType<ComponentsToken>(),
+ /** Just merge `token` & `override` at top to save perf */
+ override: objectType<{ override: Partial<AliasToken> } & ComponentsToken>(),
+ hashed: someType<string | boolean>(),
+ cssVar: someType<{
+ prefix?: string;
+ key?: string;
+ }>(),
+});
+
+export type StyleProviderProps = Partial<ExtractPropTypes<ReturnType<typeof styleProviderProps>>>;
+export interface DesignTokenProviderProps {
+ token: Partial<AliasToken>;
+ theme?: Theme<SeedToken, MapToken>;
+ components?: ComponentsToken;
+ /** Just merge `token` & `override` at top to save perf */
+ override?: { override: Partial<AliasToken> } & ComponentsToken;
+ hashed?: string | boolean;
+ cssVar?: {
+ prefix?: string;
+ key?: string;
+ };
+}
+
+export const useDesignTokenInject = () => {
+ return inject(
+ DesignTokenContextKey,
+ computed(() => globalDesignTokenApi.value || defaultConfig),
+ );
+};
+
+export const useDesignTokenProvider = (props: ComputedRef<DesignTokenProviderProps>) => {
+ const parentContext = useDesignTokenInject();
+ const context = shallowRef<Partial<DesignTokenProviderProps>>(defaultConfig);
+ watch(
+ computed(() => [props.value, parentContext.value]),
+ ([propsValue, parentContextValue]) => {
+ const mergedContext: Partial<DesignTokenProviderProps> = {
+ ...parentContextValue,
+ };
+ Object.keys(propsValue).forEach(key => {
+ const value = propsValue[key];
+ if (propsValue[key] !== undefined) {
+ mergedContext[key] = value;
+ }
+ });
+
+ context.value = mergedContext;
+ globalDesignTokenApi.value = unref(mergedContext as any);
+ triggerRef(globalDesignTokenApi);
+ },
+ { immediate: true, deep: true },
+ );
+ provide(DesignTokenContextKey, context);
+ return context;
+};
+
+export const DesignTokenProvider = defineComponent({
+ props: {
+ value: objectType<DesignTokenProviderProps>(),
+ },
+ setup(props, { slots }) {
+ useDesignTokenProvider(computed(() => props.value));
+ return () => {
+ return slots.default?.();
+ };
+ },
+});
+
+export default { useDesignTokenInject, useDesignTokenProvider, DesignTokenProvider };
diff --git a/components/_theme/getDesignToken.ts b/components/_theme/getDesignToken.ts
new file mode 100644
index 0000000000..d8d93b7ace
--- /dev/null
+++ b/components/_theme/getDesignToken.ts
@@ -0,0 +1,17 @@
+import { createTheme, getComputedToken } from '../_util/_cssinjs';
+import type { ThemeConfig } from '../config-provider/context';
+import type { AliasToken } from './interface';
+import defaultDerivative from './themes/default';
+import seedToken from './themes/seed';
+import formatToken from './util/alias';
+
+const getDesignToken = (config?: ThemeConfig): AliasToken => {
+ const theme = config?.algorithm ? createTheme(config.algorithm) : createTheme(defaultDerivative);
+ const mergedToken = {
+ ...seedToken,
+ ...config?.token,
+ };
+ return getComputedToken(mergedToken, { override: config?.token }, theme, formatToken);
+};
+
+export default getDesignToken;
diff --git a/components/_theme/index.ts b/components/_theme/index.ts
new file mode 100644
index 0000000000..481dd08d8e
--- /dev/null
+++ b/components/_theme/index.ts
@@ -0,0 +1,33 @@
+/* eslint-disable import/prefer-default-export */
+import getDesignToken from './getDesignToken';
+import type { GlobalToken, MappingAlgorithm } from './interface';
+import { defaultConfig, useToken as useInternalToken } from './internal';
+import compactAlgorithm from './themes/compact';
+import darkAlgorithm from './themes/dark';
+import defaultAlgorithm from './themes/default';
+
+// ZombieJ: We export as object to user but array in internal.
+// This is used to minimize the bundle size for antd package but safe to refactor as object also.
+// Please do not export internal `useToken` directly to avoid something export unexpected.
+/** Get current context Design Token. Will be different if you are using nest theme config. */
+function useToken() {
+ const [theme, token, hashId] = useInternalToken();
+
+ return { theme, token, hashId };
+}
+
+export type { GlobalToken, MappingAlgorithm };
+
+export default {
+ /** @private Test Usage. Do not use in production. */
+ defaultConfig,
+
+ /** Default seedToken */
+ defaultSeed: defaultConfig.token,
+
+ useToken,
+ defaultAlgorithm,
+ darkAlgorithm,
+ compactAlgorithm,
+ getDesignToken,
+};
diff --git a/components/_theme/interface/alias.ts b/components/_theme/interface/alias.ts
new file mode 100644
index 0000000000..c19d626489
--- /dev/null
+++ b/components/_theme/interface/alias.ts
@@ -0,0 +1,632 @@
+import type { CSSProperties } from 'vue';
+import type { MapToken } from './maps';
+
+// ======================================================================
+// == Alias Token ==
+// ======================================================================
+// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
+
+export interface AliasToken extends MapToken {
+ // Background
+ /**
+ * @nameZH 内容区域背景色（悬停）
+ * @nameEN Background color of content area (hover)
+ * @desc 控制内容区域背景色在鼠标悬停时的样式。
+ * @descEN Control the style of background color of content area when mouse hovers over it.
+ */
+ colorFillContentHover: string;
+ /**
+ * @nameZH 替代背景色
+ * @nameEN Alternative background color
+ * @desc 控制元素替代背景色。
+ * @descEN Control the alternative background color of element.
+ */
+ colorFillAlter: string;
+ /**
+ * @nameZH 内容区域背景色
+ * @nameEN Background color of content area
+ * @desc 控制内容区域的背景色。
+ * @descEN Control the background color of content area.
+ */
+ colorFillContent: string;
+ /**
+ * @nameZH 容器禁用态下的背景色
+ * @nameEN Disabled container background color
+ * @desc 控制容器在禁用状态下的背景色。
+ * @descEN Control the background color of container in disabled state.
+ */
+ colorBgContainerDisabled: string;
+ /**
+ * @nameZH 文本悬停态背景色
+ * @nameEN Text hover background color
+ * @desc 控制文本在悬停状态下的背景色。
+ * @descEN Control the background color of text in hover state.
+ */
+ colorBgTextHover: string;
+ /**
+ * @nameZH 文本激活态背景色
+ * @nameEN Text active background color
+ * @desc 控制文本在激活状态下的背景色。
+ * @descEN Control the background color of text in active state.
+ */
+ colorBgTextActive: string;
+
+ // Border
+ /**
+ * @nameZH 背景边框颜色
+ * @nameEN Background border color
+ * @desc 控制元素背景边框的颜色。
+ * @descEN Control the color of background border of element.
+ */
+ colorBorderBg: string;
+ /**
+ * @nameZH 分割线颜色
+ * @nameEN Separator Color
+ * @desc 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。
+ * @descEN Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.
+ */
+ colorSplit: string;
+
+ // Text
+ /**
+ * @nameZH 占位文本颜色
+ * @nameEN Placeholder Text Color
+ * @desc 控制占位文本的颜色。
+ * @descEN Control the color of placeholder text.
+ */
+ colorTextPlaceholder: string;
+ /**
+ * @nameZH 禁用字体颜色
+ * @nameEN Disabled Text Color
+ * @desc 控制禁用状态下的字体颜色。
+ * @descEN Control the color of text in disabled state.
+ */
+ colorTextDisabled: string;
+ /**
+ * @nameZH 标题字体颜色
+ * @nameEN Heading Text Color
+ * @desc 控制标题字体颜色。
+ * @descEN Control the font color of heading.
+ */
+ colorTextHeading: string;
+ /**
+ * @nameZH 文本标签字体颜色
+ * @nameEN Text label font color
+ * @desc 控制文本标签字体颜色。
+ * @descEN Control the font color of text label.
+ */
+ colorTextLabel: string;
+ /**
+ * @nameZH 文本描述字体颜色
+ * @nameEN Text description font color
+ * @desc 控制文本描述字体颜色。
+ * @descEN Control the font color of text description.
+ */
+ colorTextDescription: string;
+ /**
+ * @nameZH 固定文本高亮颜色
+ * @nameEN Fixed text highlight color
+ * @desc 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。
+ * @descEN Control the highlight color of text with background color, such as the text in Primary Button components.
+ */
+ colorTextLightSolid: string;
+
+ /**
+ /**
+ * @nameZH 弱操作图标颜色
+ * @nameEN Weak action icon color
+ * @desc 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。
+ * @descEN Weak action. Such as `allowClear` or Alert close button
+ */
+ colorIcon: string;
+
+ /** */
+ /**
+ * @nameZH 弱操作图标悬浮态颜色
+ * @nameEN Weak action icon hover color
+ * @desc 控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。
+ * @descEN Weak action hover color. Such as `allowClear` or Alert close button
+ */
+ colorIconHover: string;
+
+ /**
+ * @nameZH 高亮颜色
+ * @nameEN Highlight color
+ * @desc 控制页面元素高亮时的颜色。
+ * @descEN Control the color of page element when highlighted.
+ */
+ colorHighlight: string;
+
+ /**
+ * @nameZH 输入组件的 Outline 颜色
+ * @nameEN Input component outline color
+ * @desc 控制输入组件的外轮廓线颜色。
+ * @descEN Control the outline color of input component.
+ */
+ controlOutline: string;
+
+ /**
+ * @nameZH 警告状态下的 Outline 颜色
+ * @nameEN Warning outline color
+ * @desc 控制输入组件警告状态下的外轮廓线颜色。
+ * @descEN Control the outline color of input component in warning state.
+ */
+ colorWarningOutline: string;
+
+ /**
+ * @nameZH 错误状态下的 Outline 颜色
+ * @nameEN Error outline color
+ * @desc 控制输入组件错误状态下的外轮廓线颜色。
+ * @descEN Control the outline color of input component in error state.
+ */
+ colorErrorOutline: string;
+
+ // Font
+ /**
+ * @nameZH 选择器、级联选择器等中的操作图标字体大小
+ * @nameEN Operation icon font size in Select, Cascader, etc.
+ * @desc 控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。
+ * @descEN Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.
+ */
+ fontSizeIcon: number;
+
+ /**
+ * @nameZH 标题类组件（如 h1、h2、h3）或选中项的字体粗细
+ * @nameEN Font weight for heading components (such as h1, h2, h3) or selected item
+ * @desc 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。
+ * @descEN Control the font weight of heading components (such as h1, h2, h3) or selected item.
+ */
+ fontWeightStrong: number;
+
+ // Control
+
+ /**
+ * @nameZH 输入组件的外轮廓线宽度
+ * @nameEN Input component outline width
+ * @desc 控制输入组件的外轮廓线宽度。
+ * @descEN Control the outline width of input component.
+ */
+ controlOutlineWidth: number;
+
+ /**
+ * @nameZH 控制组件项在鼠标悬浮时的背景颜色
+ * @nameEN Background color of control component item when hovering
+ * @desc 控制组件项在鼠标悬浮时的背景颜色。
+ * @descEN Control the background color of control component item when hovering.
+ */
+ controlItemBgHover: string; // Note. It also is a color
+
+ /**
+ * @nameZH 控制组件项在激活状态下的背景颜色
+ * @nameEN Background color of control component item when active
+ * @desc 控制组件项在激活状态下的背景颜色。
+ * @descEN Control the background color of control component item when active.
+ */
+ controlItemBgActive: string; // Note. It also is a color
+
+ /**
+ * @nameZH 控制组件项在鼠标悬浮且激活状态下的背景颜色
+ * @nameEN Background color of control component item when hovering and active
+ * @desc 控制组件项在鼠标悬浮且激活状态下的背景颜色。
+ * @descEN Control the background color of control component item when hovering and active.
+ */
+ controlItemBgActiveHover: string; // Note. It also is a color
+
+ /**
+ * @nameZH 控制组件的交互大小
+ * @nameEN Interactive size of control component
+ * @desc 控制组件的交互大小。
+ * @descEN Control the interactive size of control component.
+ */
+ controlInteractiveSize: number;
+
+ /**
+ * @nameZH 控制组件项在禁用状态下的激活背景颜色
+ * @nameEN Background color of control component item when active and disabled
+ * @desc 控制组件项在禁用状态下的激活背景颜色。
+ * @descEN Control the background color of control component item when active and disabled.
+ */
+ controlItemBgActiveDisabled: string; // Note. It also is a color
+
+ // Line
+ /**
+ * @nameZH 线条宽度(聚焦态)
+ * @nameEN Line width(focus state)
+ * @desc 控制线条的宽度，当组件处于聚焦态时。
+ * @descEN Control the width of the line when the component is in focus state.
+ */
+ lineWidthFocus: number;
+
+ // Padding
+ /**
+ * @nameZH 极小内间距
+ * @nameEN Extra extra small padding
+ * @desc 控制元素的极小内间距。
+ * @descEN Control the extra extra small padding of the element.
+ */
+ paddingXXS: number;
+ /**
+ * @nameZH 特小内间距
+ * @nameEN Extra small padding
+ * @desc 控制元素的特小内间距。
+ * @descEN Control the extra small padding of the element.
+ */
+ paddingXS: number;
+ /**
+ * @nameZH 小内间距
+ * @nameEN Small padding
+ * @desc 控制元素的小内间距。
+ * @descEN Control the small padding of the element.
+ */
+ paddingSM: number;
+ /**
+ * @nameZH 内间距
+ * @nameEN Padding
+ * @desc 控制元素的内间距。
+ * @descEN Control the padding of the element.
+ */
+ padding: number;
+ /**
+ * @nameZH 中等内间距
+ * @nameEN Medium padding
+ * @desc 控制元素的中等内间距。
+ * @descEN Control the medium padding of the element.
+ */
+ paddingMD: number;
+ /**
+ * @nameZH 大内间距
+ * @nameEN Large padding
+ * @desc 控制元素的大内间距。
+ * @descEN Control the large padding of the element.
+ */
+ paddingLG: number;
+ /**
+ * @nameZH 特大内间距
+ * @nameEN Extra large padding
+ * @desc 控制元素的特大内间距。
+ * @descEN Control the extra large padding of the element.
+ */
+ paddingXL: number;
+
+ // Padding Content
+ /**
+ * @nameZH 内容水平内间距（LG）
+ * @nameEN Content horizontal padding (LG)
+ * @desc 控制内容元素水平内间距，适用于大屏幕设备。
+ * @descEN Control the horizontal padding of content element, suitable for large screen devices.
+ */
+ paddingContentHorizontalLG: number;
+ /**
+ * @nameZH 内容水平内间距
+ * @nameEN Content horizontal padding
+ * @desc 控制内容元素水平内间距。
+ * @descEN Control the horizontal padding of content element.
+ */
+ paddingContentHorizontal: number;
+ /**
+ * @nameZH 内容水平内间距（SM）
+ * @nameEN Content horizontal padding (SM)
+ * @desc 控制内容元素水平内间距，适用于小屏幕设备。
+ * @descEN Control the horizontal padding of content element, suitable for small screen devices.
+ */
+ paddingContentHorizontalSM: number;
+ /**
+ * @nameZH 内容垂直内间距（LG）
+ * @nameEN Content vertical padding (LG)
+ * @desc 控制内容元素垂直内间距，适用于大屏幕设备。
+ * @descEN Control the vertical padding of content element, suitable for large screen devices.
+ */
+ paddingContentVerticalLG: number;
+ /**
+ * @nameZH 内容垂直内间距
+ * @nameEN Content vertical padding
+ * @desc 控制内容元素垂直内间距。
+ * @descEN Control the vertical padding of content element.
+ */
+ paddingContentVertical: number;
+ /**
+ * @nameZH 内容垂直内间距（SM）
+ * @nameEN Content vertical padding (SM)
+ * @desc 控制内容元素垂直内间距，适用于小屏幕设备。
+ * @descEN Control the vertical padding of content element, suitable for small screen devices.
+ */
+ paddingContentVerticalSM: number;
+
+ // Margin
+ /**
+ * @nameZH 外边距 XXS
+ * @nameEN Margin XXS
+ * @desc 控制元素外边距，最小尺寸。
+ * @descEN Control the margin of an element, with the smallest size.
+ */
+ marginXXS: number;
+ /**
+ * @nameZH 外边距 XS
+ * @nameEN Margin XS
+ * @desc 控制元素外边距，小尺寸。
+ * @descEN Control the margin of an element, with a small size.
+ */
+ marginXS: number;
+ /**
+ * @nameZH 外边距 SM
+ * @nameEN Margin SM
+ * @desc 控制元素外边距，中小尺寸。
+ * @descEN Control the margin of an element, with a medium-small size.
+ */
+ marginSM: number;
+ /**
+ * @nameZH 外边距
+ * @nameEN Margin
+ * @desc 控制元素外边距，中等尺寸。
+ * @descEN Control the margin of an element, with a medium size.
+ */
+ margin: number;
+ /**
+ * @nameZH 外边距 MD
+ * @nameEN Margin MD
+ * @desc 控制元素外边距，中大尺寸。
+ * @descEN Control the margin of an element, with a medium-large size.
+ */
+ marginMD: number;
+ /**
+ * @nameZH 外边距 LG
+ * @nameEN Margin LG
+ * @desc 控制元素外边距，大尺寸。
+ * @descEN Control the margin of an element, with a large size.
+ */
+ marginLG: number;
+ /**
+ * @nameZH 外边距 XL
+ * @nameEN Margin XL
+ * @desc 控制元素外边距，超大尺寸。
+ * @descEN Control the margin of an element, with an extra-large size.
+ */
+ marginXL: number;
+ /**
+ * @nameZH 外边距 XXL
+ * @nameEN Margin XXL
+ * @desc 控制元素外边距，最大尺寸。
+ * @descEN Control the margin of an element, with the largest size.
+ */
+ marginXXL: number;
+
+ // =============== Legacy: should be remove ===============
+ /**
+ * @nameZH 加载状态透明度
+ * @nameEN Loading opacity
+ * @desc 控制加载状态的透明度。
+ * @descEN Control the opacity of the loading state.
+ */
+ opacityLoading: number;
+
+ /**
+ * @nameZH 一级阴影
+ * @nameEN Box shadow
+ * @desc 控制元素阴影样式。
+ * @descEN Control the box shadow style of an element.
+ */
+ boxShadow: string;
+ /**
+ * @nameZH 二级阴影
+ * @nameEN Secondary box shadow
+ * @desc 控制元素二级阴影样式。
+ * @descEN Control the secondary box shadow style of an element.
+ */
+ boxShadowSecondary: string;
+ /**
+ * @nameZH 三级阴影
+ * @nameEN Tertiary box shadow
+ * @desc 控制元素三级盒子阴影样式。
+ * @descEN Control the tertiary box shadow style of an element.
+ */
+ boxShadowTertiary: string;
+
+ /**
+ * @nameZH 链接文本装饰
+ * @nameEN Link text decoration
+ * @desc 控制链接文本的装饰样式。
+ * @descEN Control the text decoration style of a link.
+ */
+ linkDecoration: CSSProperties['textDecoration'];
+ /**
+ * @nameZH 链接鼠标悬浮时文本装饰
+ * @nameEN Link text decoration on mouse hover
+ * @desc 控制链接鼠标悬浮时文本的装饰样式。
+ * @descEN Control the text decoration style of a link on mouse hover.
+ */
+ linkHoverDecoration: CSSProperties['textDecoration'];
+ /**
+ * @nameZH 链接聚焦时文本装饰
+ * @nameEN Link text decoration on focus
+ * @desc 控制链接聚焦时文本的装饰样式。
+ * @descEN Control the text decoration style of a link on focus.
+ */
+ linkFocusDecoration: CSSProperties['textDecoration'];
+
+ /**
+ * @nameZH 控制水平内间距
+ * @nameEN Control horizontal padding
+ * @desc 控制元素水平内间距。
+ * @descEN Control the horizontal padding of an element.
+ */
+ controlPaddingHorizontal: number;
+ /**
+ * @nameZH 控制中小尺寸水平内间距
+ * @nameEN Control horizontal padding with a small-medium size
+ * @desc 控制元素中小尺寸水平内间距。
+ * @descEN Control the horizontal padding of an element with a small-medium size.
+ */
+ controlPaddingHorizontalSM: number;
+
+ // Media queries breakpoints
+ /**
+ * @nameZH 屏幕宽度（像素） - 超小屏幕
+ * @nameEN Screen width (pixels) - Extra small screens
+ * @desc 控制超小屏幕的屏幕宽度。
+ * @descEN Control the screen width of extra small screens.
+ */
+ screenXS: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超小屏幕最小值
+ * @nameEN Screen width (pixels) - Extra small screens minimum value
+ * @desc 控制超小屏幕的最小宽度。
+ * @descEN Control the minimum width of extra small screens.
+ */
+ screenXSMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超小屏幕最大值
+ * @nameEN Screen width (pixels) - Extra small screens maximum value
+ * @desc 控制超小屏幕的最大宽度。
+ * @descEN Control the maximum width of extra small screens.
+ */
+ screenXSMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 小屏幕
+ * @nameEN Screen width (pixels) - Small screens
+ * @desc 控制小屏幕的屏幕宽度。
+ * @descEN Control the screen width of small screens.
+ */
+ screenSM: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 小屏幕最小值
+ * @nameEN Screen width (pixels) - Small screens minimum value
+ * @desc 控制小屏幕的最小宽度。
+ * @descEN Control the minimum width of small screens.
+ */
+ screenSMMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 小屏幕最大值
+ * @nameEN Screen width (pixels) - Small screens maximum value
+ * @desc 控制小屏幕的最大宽度。
+ * @descEN Control the maximum width of small screens.
+ */
+ screenSMMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 中等屏幕
+ * @nameEN Screen width (pixels) - Medium screens
+ * @desc 控制中等屏幕的屏幕宽度。
+ * @descEN Control the screen width of medium screens.
+ */
+ screenMD: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 中等屏幕最小值
+ * @nameEN Screen width (pixels) - Medium screens minimum value
+ * @desc 控制中等屏幕的最小宽度。
+ * @descEN Control the minimum width of medium screens.
+ */
+ screenMDMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 中等屏幕最大值
+ * @nameEN Screen width (pixels) - Medium screens maximum value
+ * @desc 控制中等屏幕的最大宽度。
+ * @descEN Control the maximum width of medium screens.
+ */
+ screenMDMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 大屏幕
+ * @nameEN Screen width (pixels) - Large screens
+ * @desc 控制大屏幕的屏幕宽度。
+ * @descEN Control the screen width of large screens.
+ */
+ screenLG: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 大屏幕最小值
+ * @nameEN Screen width (pixels) - Large screens minimum value
+ * @desc 控制大屏幕的最小宽度。
+ * @descEN Control the minimum width of large screens.
+ */
+ screenLGMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 大屏幕最大值
+ * @nameEN Screen width (pixels) - Large screens maximum value
+ * @desc 控制大屏幕的最大宽度。
+ * @descEN Control the maximum width of large screens.
+ */
+ screenLGMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超大屏幕
+ * @nameEN Screen width (pixels) - Extra large screens
+ * @desc 控制超大屏幕的屏幕宽度。
+ * @descEN Control the screen width of extra large screens.
+ */
+ screenXL: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超大屏幕最小值
+ * @nameEN Screen width (pixels) - Extra large screens minimum value
+ * @desc 控制超大屏幕的最小宽度。
+ * @descEN Control the minimum width of extra large screens.
+ */
+ screenXLMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超大屏幕最大值
+ * @nameEN Screen width (pixels) - Extra large screens maximum value
+ * @desc 控制超大屏幕的最大宽度。
+ * @descEN Control the maximum width of extra large screens.
+ */
+ screenXLMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超大屏幕
+ * @nameEN Screen width (pixels) - Extra extra large screens.
+ * @desc 控制超超大屏幕的屏幕宽度。
+ * @descEN Control the screen width of extra extra large screens.
+ */
+ screenXXL: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超大屏幕最小值
+ * @nameEN Screen width (pixels) - Extra extra large screens minimum value
+ * @desc 控制超超大屏幕的最小宽度。
+ * @descEN Control the minimum width of extra extra large screens.
+ */
+ screenXXLMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超大屏幕最大值
+ * @nameEN Screen width (pixels) - Extra extra large screens maximum value
+ * @desc 控制超超大屏幕的最大宽度。
+ * @descEN Control the maximum width of extra extra large screens.
+ */
+ screenXXLMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超超大屏幕
+ * @nameEN Screen width (pixels) - Extra extra extra large screens.
+ * @desc 控制超超超大屏幕的屏幕宽度。
+ * @descEN Control the screen width of extra extra extra large screens.
+ */
+ screenXXXL: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超超大屏幕最小值
+ * @nameEN Screen width (pixels) - Extra extra extra large screens minimum value
+ * @desc 控制超超超大屏幕的最小宽度。
+ * @descEN Control the minimum width of extra extra extra large screens.
+ */
+ screenXXXLMin: number;
+
+ /**
+ * @deprecated
+ * Used for DefaultButton, Switch which has default outline
+ * @desc 默认样式的 Outline 颜色
+ * @descEN Default style outline color.
+ */
+ controlTmpOutline: string;
+
+ // FIXME: component box-shadow, should be removed
+ /** @internal */
+ boxShadowPopoverArrow: string;
+ /** @internal */
+ boxShadowCard: string;
+ /** @internal */
+ boxShadowDrawerRight: string;
+ /** @internal */
+ boxShadowDrawerLeft: string;
+ /** @internal */
+ boxShadowDrawerUp: string;
+ /** @internal */
+ boxShadowDrawerDown: string;
+ /** @internal */
+ boxShadowTabsOverflowLeft: string;
+ /** @internal */
+ boxShadowTabsOverflowRight: string;
+ /** @internal */
+ boxShadowTabsOverflowTop: string;
+ /** @internal */
+ boxShadowTabsOverflowBottom: string;
+}
diff --git a/components/_theme/interface/components.ts b/components/_theme/interface/components.ts
new file mode 100644
index 0000000000..00f6a59509
--- /dev/null
+++ b/components/_theme/interface/components.ts
@@ -0,0 +1,137 @@
+import type { ComponentToken as WaveToken } from '../../_util/wave/style';
+import type { ComponentToken as AffixComponentToken } from '../../affix/style';
+import type { ComponentToken as AlertComponentToken } from '../../alert/style';
+import type { ComponentToken as AnchorComponentToken } from '../../anchor/style';
+import type { ComponentToken as AppComponentToken } from '../../app/style';
+import type { ComponentToken as AvatarComponentToken } from '../../avatar/style';
+import type { ComponentToken as BadgeComponentToken } from '../../badge/style';
+import type { ComponentToken as BreadcrumbComponentToken } from '../../breadcrumb/style';
+import type { ComponentToken as ButtonComponentToken } from '../../button/style';
+import type { ComponentToken as CalendarComponentToken } from '../../calendar/style';
+import type { ComponentToken as CardComponentToken } from '../../card/style';
+import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
+import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
+import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style';
+import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';
+// import type { ComponentToken as ColorPickerComponentToken } from '../../color-picker/style';
+import type { ComponentToken as CommentComponentToken } from '../../comment/style';
+import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
+import type { ComponentToken as DescriptionsComponentToken } from '../../descriptions/style';
+import type { ComponentToken as DividerComponentToken } from '../../divider/style';
+import type { ComponentToken as DrawerComponentToken } from '../../drawer/style';
+import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
+import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
+import type { ComponentToken as FlexComponentToken } from '../../flex/style';
+import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style';
+import type { ComponentToken as FormComponentToken } from '../../form/style';
+import type { ComponentToken as GridComponentToken } from '../../grid/style';
+import type { ComponentToken as ImageComponentToken } from '../../image/style';
+import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
+import type { ComponentToken as InputComponentToken } from '../../input/style';
+import type { ComponentToken as LayoutComponentToken } from '../../layout/style';
+import type { ComponentToken as ListComponentToken } from '../../list/style';
+import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
+import type { ComponentToken as MenuComponentToken } from '../../menu/style';
+import type { ComponentToken as MessageComponentToken } from '../../message/style';
+import type { ComponentToken as ModalComponentToken } from '../../modal/style';
+import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
+import type { ComponentToken as PageHeaderComponentToken } from '../../page-header/style';
+import type { ComponentToken as PaginationComponentToken } from '../../pagination/style';
+import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
+import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
+import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
+import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
+import type { ComponentToken as RadioComponentToken } from '../../radio/style';
+import type { ComponentToken as RateComponentToken } from '../../rate/style';
+import type { ComponentToken as ResultComponentToken } from '../../result/style';
+import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
+import type { ComponentToken as SelectComponentToken } from '../../select/style';
+import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style';
+import type { ComponentToken as SliderComponentToken } from '../../slider/style';
+import type { ComponentToken as SpaceComponentToken } from '../../space/style';
+import type { ComponentToken as SpinComponentToken } from '../../spin/style';
+import type { ComponentToken as StatisticComponentToken } from '../../statistic/style';
+import type { ComponentToken as StepsComponentToken } from '../../steps/style';
+import type { ComponentToken as SwitchComponentToken } from '../../switch/style';
+import type { ComponentToken as TableComponentToken } from '../../table/style';
+import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
+import type { ComponentToken as TagComponentToken } from '../../tag/style';
+import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
+import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
+import type { ComponentToken as TourComponentToken } from '../../tour/style';
+import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
+import type { ComponentToken as TreeSelectComponentToken } from '../../tree-select/style';
+import type { ComponentToken as TreeComponentToken } from '../../tree/style';
+import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
+import type { ComponentToken as UploadComponentToken } from '../../upload/style';
+
+export interface ComponentTokenMap {
+ Affix?: AffixComponentToken;
+ Alert?: AlertComponentToken;
+ Anchor?: AnchorComponentToken;
+ Avatar?: AvatarComponentToken;
+ Badge?: BadgeComponentToken;
+ Button?: ButtonComponentToken;
+ Breadcrumb?: BreadcrumbComponentToken;
+ Card?: CardComponentToken;
+ Carousel?: CarouselComponentToken;
+ Cascader?: CascaderComponentToken;
+ Checkbox?: CheckboxComponentToken;
+ // ColorPicker?: ColorPickerComponentToken;
+ Collapse?: CollapseComponentToken;
+ Comment?: CommentComponentToken;
+ DatePicker?: DatePickerComponentToken;
+ Descriptions?: DescriptionsComponentToken;
+ Divider?: DividerComponentToken;
+ Drawer?: DrawerComponentToken;
+ Dropdown?: DropdownComponentToken;
+ Empty?: EmptyComponentToken;
+ Flex?: FlexComponentToken;
+ FloatButton?: FloatButtonComponentToken;
+ Form?: FormComponentToken;
+ Grid?: GridComponentToken;
+ Image?: ImageComponentToken;
+ Input?: InputComponentToken;
+ InputNumber?: InputNumberComponentToken;
+ Layout?: LayoutComponentToken;
+ List?: ListComponentToken;
+ Mentions?: MentionsComponentToken;
+ Notification?: NotificationComponentToken;
+ PageHeader?: PageHeaderComponentToken;
+ Pagination?: PaginationComponentToken;
+ Popover?: PopoverComponentToken;
+ Popconfirm?: PopconfirmComponentToken;
+ Rate?: RateComponentToken;
+ Radio?: RadioComponentToken;
+ Result?: ResultComponentToken;
+ Segmented?: SegmentedComponentToken;
+ Select?: SelectComponentToken;
+ Skeleton?: SkeletonComponentToken;
+ Slider?: SliderComponentToken;
+ Spin?: SpinComponentToken;
+ Statistic?: StatisticComponentToken;
+ Switch?: SwitchComponentToken;
+ Tag?: TagComponentToken;
+ Tree?: TreeComponentToken;
+ TreeSelect?: TreeSelectComponentToken;
+ Typography?: TypographyComponentToken;
+ Timeline?: TimelineComponentToken;
+ Transfer?: TransferComponentToken;
+ Tabs?: TabsComponentToken;
+ Calendar?: CalendarComponentToken;
+ Steps?: StepsComponentToken;
+ Menu?: MenuComponentToken;
+ Modal?: ModalComponentToken;
+ Message?: MessageComponentToken;
+ Upload?: UploadComponentToken;
+ Tooltip?: TooltipComponentToken;
+ Table?: TableComponentToken;
+ Space?: SpaceComponentToken;
+ Progress?: ProgressComponentToken;
+ Tour?: TourComponentToken;
+ QRCode?: QRCodeComponentToken;
+ App?: AppComponentToken;
+
+ /** @private Internal TS definition. Do not use. */
+ Wave?: WaveToken;
+}
diff --git a/components/_theme/interface/index.ts b/components/_theme/interface/index.ts
new file mode 100644
index 0000000000..8d22a3183e
--- /dev/null
+++ b/components/_theme/interface/index.ts
@@ -0,0 +1,44 @@
+import type { CSSInterpolation, DerivativeFunc } from '../../_util/_cssinjs';
+import type { AliasToken } from './alias';
+import type { ComponentTokenMap } from './components';
+import type { MapToken } from './maps';
+import type { SeedToken } from './seeds';
+import type { VueNode } from '../..//_util/type';
+import type { Ref } from 'vue';
+
+export type MappingAlgorithm = DerivativeFunc<SeedToken, MapToken>;
+
+export type OverrideToken = {
+ [key in keyof ComponentTokenMap]: Partial<ComponentTokenMap[key]> & Partial<AliasToken>;
+};
+
+/** Final token which contains the components level override */
+export type GlobalToken = AliasToken & ComponentTokenMap;
+
+export type { AliasToken } from './alias';
+export type { ComponentTokenMap } from './components';
+export type {
+ ColorMapToken,
+ ColorNeutralMapToken,
+ CommonMapToken,
+ FontMapToken,
+ HeightMapToken,
+ MapToken,
+ SizeMapToken,
+ StyleMapToken,
+} from './maps';
+export { PresetColors } from './presetColors';
+export type {
+ LegacyColorPalettes,
+ ColorPalettes,
+ PresetColorKey,
+ PresetColorType,
+} from './presetColors';
+export type { SeedToken } from './seeds';
+
+export type UseComponentStyleResult = [(node: VueNode) => VueNode, Ref<string>];
+
+export type GenerateStyle<
+ ComponentToken extends object = AliasToken,
+ ReturnType = CSSInterpolation,
+> = (token: ComponentToken) => ReturnType;
diff --git a/components/_theme/interface/maps/colors.ts b/components/_theme/interface/maps/colors.ts
new file mode 100644
index 0000000000..659209d8df
--- /dev/null
+++ b/components/_theme/interface/maps/colors.ts
@@ -0,0 +1,598 @@
+export interface ColorNeutralMapToken {
+ /**
+ * @internal
+ */
+ colorTextBase: string;
+
+ /**
+ * @internal
+ */
+ colorBgBase: string;
+
+ // ---------- Text ---------- //
+
+ /**
+ * @nameZH 一级文本色
+ * @nameEN Text Color
+ * @desc 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。
+ * @descEN Default text color which comply with W3C standards, and this color is also the darkest neutral color.
+ */
+ colorText: string;
+
+ /**
+ * @nameZH 二级文本色
+ * @nameEN Secondary Text Color
+ * @desc 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。
+ * @descEN The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.
+ */
+ colorTextSecondary: string;
+
+ /**
+ * @nameZH 三级文本色
+ * @desc 第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。
+ * @descEN The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc.
+ */
+ colorTextTertiary: string;
+
+ /**
+ * @nameZH 四级文本色
+ * @desc 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。
+ * @descEN The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.
+ */
+ colorTextQuaternary: string;
+
+ // ---------- Border ---------- //
+
+ /**
+ * @nameZH 一级边框色
+ * @nameEN Default Border Color
+ * @desc 默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。
+ * @descEN Default border color, used to separate different elements, such as: form separator, card separator, etc.
+ */
+ colorBorder: string;
+
+ /**
+ * @nameZH 二级边框色
+ * @nameEN Secondary Border Color
+ * @desc 比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。
+ * @descEN Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used.
+ */
+ colorBorderSecondary: string;
+
+ // ---------- Fill ---------- //
+
+ /**
+ * @nameZH 一级填充色
+ * @desc 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。
+ * @descEN The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider.
+ */
+ colorFill: string;
+
+ /**
+ * @nameZH 二级填充色
+ * @desc 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。
+ * @descEN The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc.
+ */
+ colorFillSecondary: string;
+
+ /**
+ * @nameZH 三级填充色
+ * @desc 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。
+ * @descEN The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.
+ */
+ colorFillTertiary: string;
+
+ /**
+ * @nameZH 四级填充色
+ * @desc 最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。
+ * @descEN The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc.
+ */
+ colorFillQuaternary: string;
+
+ // ---------- Surface ---------- //
+
+ /**
+ * @nameZH 布局背景色
+ * @nameEN Layout Background Color
+ * @desc 该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的
+ * @descEN This color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong.
+ */
+ colorBgLayout: string;
+
+ /**
+ * @nameZH 组件容器背景色
+ * @desc 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。
+ * @descEN Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.
+ */
+ colorBgContainer: string;
+
+ /**
+ * @nameZH 浮层容器背景色
+ * @desc 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。
+ * @descEN Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc.
+ */
+ colorBgElevated: string;
+
+ /**
+ * @nameZH 引起注意的背景色
+ * @desc 该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。
+ * @descEN This color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip.
+ */
+ colorBgSpotlight: string;
+ /**
+ * @nameZH 毛玻璃容器背景色
+ * @nameEN Frosted glass container background color
+ * @desc 控制毛玻璃容器的背景色，通常为透明色。
+ * @descEN Control the background color of frosted glass container, usually transparent.
+ */
+ colorBgBlur: string;
+}
+
+/**
+ * 品牌色梯度变量
+ */
+interface ColorPrimaryMapToken {
+ /**
+ * @nameZH 品牌主色
+ * @nameEN Primary color of the brand
+ * @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一，用于产品的主色调、主按钮、主图标、主文本等
+ * @descEN The brand color is one of the most intuitive visual elements that reflects product characteristics and communication concepts, and is used for the main color tone, main buttons, main icons, main text, etc. of the product.
+ */
+ colorPrimary: string; // 6
+
+ /**
+ * @nameZH 主色浅色背景色
+ * @nameEN Light background color of primary color
+ * @desc 主色浅色背景颜色，一般用于视觉层级较弱的选中状态。
+ * @descEN Light background color of primary color, usually used for weak visual level selection state.
+ */
+ colorPrimaryBg: string; // 1
+
+ /**
+ * @nameZH 主色浅色背景悬浮态
+ * @nameEN Hover state of light background color of primary color
+ * @desc 与主色浅色背景颜色相对应的悬浮态颜色。
+ * @descEN The hover state color corresponding to the light background color of the primary color.
+ */
+ colorPrimaryBgHover: string; // 2
+
+ /**
+ * @nameZH 主色描边色
+ * @nameEN Border color of primary color
+ * @desc 主色梯度下的描边用色，用在 Slider 等组件的描边上。
+ * @descEN The stroke color under the main color gradient, used on the stroke of components such as Slider.
+ */
+ colorPrimaryBorder: string; // 3
+
+ /**
+ * @nameZH 主色描边色悬浮态
+ * @nameEN Hover state of border color of primary color
+ * @desc 主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。
+ * @descEN The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button.
+ */
+ colorPrimaryBorderHover: string; // 4
+
+ /**
+ * @nameZH 主色悬浮态
+ * @nameEN Hover state of primary color
+ * @desc 主色梯度下的悬浮态。
+ * @descEN Hover state under the main color gradient.
+ */
+ colorPrimaryHover: string; // 5
+
+ /**
+ * @nameZH 主色激活态
+ * @nameEN Active state of primary color
+ * @desc 主色梯度下的深色激活态。
+ * @descEN Dark active state under the main color gradient.
+ */
+ colorPrimaryActive: string; // 7
+
+ /**
+ * @nameZH 主色文本悬浮态
+ * @nameEN Hover state of text color of primary color
+ * @desc 主色梯度下的文本悬浮态。
+ * @descEN Hover state of text color under the main color gradient.
+ */
+ colorPrimaryTextHover: string; // 8
+
+ /**
+ * @nameZH 主色文本
+ * @nameEN Text color of primary color
+ * @desc 主色梯度下的文本颜色。
+ * @descEN Text color under the main color gradient.
+ */
+ colorPrimaryText: string; // 9
+
+ /**
+ * @nameZH 主色文本激活态
+ * @nameEN Active state of text color of primary color
+ * @desc 主色梯度下的文本激活态。
+ * @descEN Active state of text color under the main color gradient.
+ */
+ colorPrimaryTextActive: string; // 10
+}
+
+interface ColorSuccessMapToken {
+ /**
+ * @nameZH 成功色的浅色背景颜色
+ * @nameEN Light Background Color of Success Color
+ * @desc 成功色的浅色背景颜色，用于 Tag 和 Alert 的成功态背景色
+ * @descEN Light background color of success color, used for Tag and Alert success state background color
+ */
+ colorSuccessBg: string; // 1
+
+ /**
+ * @nameZH 成功色的浅色背景色悬浮态
+ * @nameEN Hover State Color of Light Success Background
+ * @desc 成功色浅色背景颜色，一般用于视觉层级较弱的选中状态，不过 antd 目前没有使用到该 token
+ * @descEN Light background color of success color, but antd does not use this token currently
+ */
+ colorSuccessBgHover: string; // 2
+
+ /**
+ * @nameZH 成功色的描边色
+ * @nameEN Border Color of Success Color
+ * @desc 成功色的描边色，用于 Tag 和 Alert 的成功态描边色
+ * @descEN Border color of success color, used for Tag and Alert success state border color
+ */
+ colorSuccessBorder: string; // 3
+
+ /**
+ * @nameZH 成功色的描边色悬浮态
+ * @nameEN Hover State Color of Success Border
+ * @desc 成功色的描边色悬浮态
+ * @descEN Hover state color of success color border
+ */
+ colorSuccessBorderHover: string; // 4
+
+ /**
+ * @nameZH 成功色的深色悬浮态
+ * @nameEN Hover State Color of Dark Success
+ * @desc 成功色的深色悬浮态
+ * @descEN Hover state color of dark success color
+ */
+ colorSuccessHover: string; // 5
+
+ /**
+ * @nameZH 成功色
+ * @nameEN Success Color
+ * @desc 默认的成功色，如 Result、Progress 等组件中都有使用该颜色
+ * @descEN Default success color, used in components such as Result and Progress
+ */
+ colorSuccess: string; // 6
+
+ /**
+ * @nameZH 成功色的深色激活态
+ * @nameEN Active State Color of Dark Success
+ * @desc 成功色的深色激活态
+ * @descEN Active state color of dark success color
+ */
+ colorSuccessActive: string; // 7
+
+ /**
+ * @nameZH 成功色的文本悬浮态
+ * @nameEN Hover State Color of Success Text
+ * @desc 成功色的文本悬浮态
+ * @descEN Hover state color of success color text
+ */
+ colorSuccessTextHover: string; // 8
+
+ /**
+ * @nameZH 成功色的文本默认态
+ * @nameEN Default State Color of Success Text
+ * @desc 成功色的文本默认态
+ * @descEN Default state color of success color text
+ */
+ colorSuccessText: string; // 9
+
+ /**
+ * @nameZH 成功色的文本激活态
+ * @nameEN Active State Color of Success Text
+ * @desc 成功色的文本激活态
+ * @descEN Active state color of success color text
+ */
+ colorSuccessTextActive: string; // 10
+}
+
+interface ColorWarningMapToken {
+ /**
+ * @nameZH 警戒色的浅色背景颜色
+ * @nameEN Warning background color
+ * @desc 警戒色的浅色背景颜色
+ * @descEN The background color of the warning state.
+ */
+ colorWarningBg: string; // 1
+
+ /**
+ * @nameZH 警戒色的浅色背景色悬浮态
+ * @nameEN Warning background color hover state
+ * @desc 警戒色的浅色背景色悬浮态
+ * @descEN The hover state background color of the warning state.
+ */
+ colorWarningBgHover: string; // 2
+
+ /**
+ * @nameZH 警戒色的描边色
+ * @nameEN Warning border color
+ * @desc 警戒色的描边色
+ * @descEN The border color of the warning state.
+ */
+ colorWarningBorder: string; // 3
+
+ /**
+ * @nameZH 警戒色的描边色悬浮态
+ * @nameEN Warning border color hover state
+ * @desc 警戒色的描边色悬浮态
+ * @descEN The hover state border color of the warning state.
+ */
+ colorWarningBorderHover: string; // 4
+
+ /**
+ * @nameZH 警戒色的深色悬浮态
+ * @nameEN Warning hover color
+ * @desc 警戒色的深色悬浮态
+ * @descEN The hover state of the warning color.
+ */
+ colorWarningHover: string; // 5
+
+ /**
+ * @nameZH 警戒色
+ * @nameEN Warning color
+ * @desc 最常用的警戒色，例如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该颜色
+ * @descEN The most commonly used warning color, used for warning components such as Notification, Alert, or input components.
+ */
+ colorWarning: string; // 6
+
+ /**
+ * @nameZH 警戒色的深色激活态
+ * @nameEN Warning active color
+ * @desc 警戒色的深色激活态
+ * @descEN The active state of the warning color.
+ */
+ colorWarningActive: string; // 7
+
+ /**
+ * @nameZH 警戒色的文本悬浮态
+ * @nameEN Warning text hover state
+ * @desc 警戒色的文本悬浮态
+ * @descEN The hover state of the text in the warning color.
+ */
+ colorWarningTextHover: string; // 8
+
+ /**
+ * @nameZH 警戒色的文本默认态
+ * @nameEN Warning text default state
+ * @desc 警戒色的文本默认态
+ * @descEN The default state of the text in the warning color.
+ */
+ colorWarningText: string; // 9
+
+ /**
+ * @nameZH 警戒色的文本激活态
+ * @nameEN Warning text active state
+ * @desc 警戒色的文本激活态
+ * @descEN The active state of the text in the warning color.
+ */
+ colorWarningTextActive: string; // 10
+}
+
+interface ColorInfoMapToken {
+ /**
+ * @nameZH 信息色的浅色背景颜色
+ * @nameEN Light background color of information color
+ * @desc 信息色的浅色背景颜色。
+ * @descEN Light background color of information color.
+ */
+ colorInfoBg: string; // 1
+
+ /**
+ * @nameZH 信息色的浅色背景色悬浮态
+ * @nameEN Hover state of light background color of information color
+ * @desc 信息色的浅色背景色悬浮态。
+ * @descEN Hover state of light background color of information color.
+ */
+ colorInfoBgHover: string; // 2
+
+ /**
+ * @nameZH 信息色的描边色
+ * @nameEN Border color of information color
+ * @desc 信息色的描边色。
+ * @descEN Border color of information color.
+ */
+ colorInfoBorder: string; // 3
+
+ /**
+ * @nameZH 信息色的描边色悬浮态
+ * @nameEN Hover state of border color of information color
+ * @desc 信息色的描边色悬浮态。
+ * @descEN Hover state of border color of information color.
+ */
+ colorInfoBorderHover: string; // 4
+
+ /**
+ * @nameZH 信息色的深色悬浮态
+ * @nameEN Hover state of dark color of information color
+ * @desc 信息色的深色悬浮态。
+ * @descEN Hover state of dark color of information color.
+ */
+ colorInfoHover: string; // 5
+
+ /**
+ * @nameZH 信息色
+ * @nameEN Information color
+ * @desc 信息色。
+ * @descEN Information color.
+ */
+ colorInfo: string; // 6
+
+ /**
+ * @nameZH 信息色的深色激活态
+ * @nameEN Active state of dark color of information color
+ * @desc 信息色的深色激活态。
+ * @descEN Active state of dark color of information color.
+ */
+ colorInfoActive: string; // 7
+
+ /**
+ * @nameZH 信息色的文本悬浮态
+ * @nameEN Hover state of text color of information color
+ * @desc 信息色的文本悬浮态。
+ * @descEN Hover state of text color of information color.
+ */
+ colorInfoTextHover: string; // 8
+
+ /**
+ * @nameZH 信息色的文本默认态
+ * @nameEN Default state of text color of information color
+ * @desc 信息色的文本默认态。
+ * @descEN Default state of text color of information color.
+ */
+ colorInfoText: string; // 9
+
+ /**
+ * @nameZH 信息色的文本激活态
+ * @nameEN Active state of text color of information color
+ * @desc 信息色的文本激活态。
+ * @descEN Active state of text color of information color.
+ */
+ colorInfoTextActive: string; // 10
+}
+
+interface ColorErrorMapToken {
+ /**
+ * @nameZH 错误色的浅色背景颜色
+ * @nameEN Error background color
+ * @desc 错误色的浅色背景颜色
+ * @descEN The background color of the error state.
+ */
+ colorErrorBg: string; // 1
+
+ /**
+ * @nameZH 错误色的浅色背景色悬浮态
+ * @nameEN Error background color hover state
+ * @desc 错误色的浅色背景色悬浮态
+ * @descEN The hover state background color of the error state.
+ */
+ colorErrorBgHover: string; // 2
+
+ /**
+ * @nameZH 错误色的描边色
+ * @nameEN Error border color
+ * @desc 错误色的描边色
+ * @descEN The border color of the error state.
+ */
+ colorErrorBorder: string; // 3
+
+ /**
+ * @nameZH 错误色的描边色悬浮态
+ * @nameEN Error border color hover state
+ * @desc 错误色的描边色悬浮态
+ * @descEN The hover state border color of the error state.
+ */
+ colorErrorBorderHover: string; // 4
+
+ /**
+ * @nameZH 错误色的深色悬浮态
+ * @nameEN Error hover color
+ * @desc 错误色的深色悬浮态
+ * @descEN The hover state of the error color.
+ */
+ colorErrorHover: string; // 5
+
+ /**
+ * @nameZH 错误色
+ * @nameEN Error color
+ * @desc 错误色
+ * @descEN The color of the error state.
+ */
+ colorError: string; // 6
+
+ /**
+ * @nameZH 错误色的深色激活态
+ * @nameEN Error active color
+ * @desc 错误色的深色激活态
+ * @descEN The active state of the error color.
+ */
+ colorErrorActive: string; // 7
+
+ /**
+ * @nameZH 错误色的文本悬浮态
+ * @nameEN Error text hover state
+ * @desc 错误色的文本悬浮态
+ * @descEN The hover state of the text in the error color.
+ */
+ colorErrorTextHover: string; // 8
+
+ /**
+ * @nameZH 错误色的文本默认态
+ * @nameEN Error text default state
+ * @desc 错误色的文本默认态
+ * @descEN The default state of the text in the error color.
+ */
+ colorErrorText: string; // 9
+
+ /**
+ * @nameZH 错误色的文本激活态
+ * @nameEN Error text active state
+ * @desc 错误色的文本激活态
+ * @descEN The active state of the text in the error color.
+ */
+ colorErrorTextActive: string; // 10
+}
+
+export interface ColorLinkMapToken {
+ /**
+ * @nameZH 超链接颜色
+ * @nameEN Hyperlink color
+ * @desc 控制超链接的颜色。
+ * @descEN Control the color of hyperlink.
+ */
+ colorLink: string;
+ /**
+ * @nameZH 超链接悬浮颜色
+ * @nameEN Hyperlink hover color
+ * @desc 控制超链接悬浮时的颜色。
+ * @descEN Control the color of hyperlink when hovering.
+ */
+ colorLinkHover: string;
+ /**
+ * @nameZH 超链接激活颜色
+ * @nameEN Hyperlink active color
+ * @desc 控制超链接被点击时的颜色。
+ * @descEN Control the color of hyperlink when clicked.
+ */
+ colorLinkActive: string;
+}
+
+export interface ColorMapToken
+ extends ColorNeutralMapToken,
+ ColorPrimaryMapToken,
+ ColorSuccessMapToken,
+ ColorWarningMapToken,
+ ColorErrorMapToken,
+ ColorInfoMapToken,
+ ColorLinkMapToken {
+ /**
+ * @nameZH 纯白色
+ * @desc 不随主题变化的纯白色
+ * @descEN Pure white color don't changed by theme
+ * @default #FFFFFF
+ */
+ colorWhite: string;
+
+ /**
+ * @nameZH 浮层的背景蒙层颜色
+ * @nameEN Background color of the mask
+ * @desc 浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer 等组件的蒙层使用的是该 token
+ * @descEN The background color of the mask, used to cover the content below the mask, Modal, Drawer and other components use this token
+ */
+ colorBgMask: string;
+
+ /**
+ * @nameZH 纯黑色
+ * @desc 不随主题变化的纯黑色
+ * @default #0000
+ */
+ // colorBlack: string;
+}
diff --git a/components/_theme/interface/maps/font.ts b/components/_theme/interface/maps/font.ts
new file mode 100644
index 0000000000..40ed00716f
--- /dev/null
+++ b/components/_theme/interface/maps/font.ts
@@ -0,0 +1,139 @@
+export interface FontMapToken {
+ // Font Size
+ /**
+ * @desc 小号字体大小
+ * @descEN Small font size
+ */
+ fontSizeSM: number;
+ /**
+ * @desc 标准字体大小
+ * @descEN Standard font size
+ */
+ fontSize: number;
+ /**
+ * @desc 大号字体大小
+ * @descEN Large font size
+ */
+ fontSizeLG: number;
+ /**
+ * @desc 超大号字体大小
+ * @descEN Super large font size
+ */
+ fontSizeXL: number;
+
+ /**
+ * @nameZH 一级标题字号
+ * @nameEN Font size of heading level 1
+ * @desc H1 标签所使用的字号
+ * @descEN Font size of h1 tag.
+ * @default 38
+ */
+ fontSizeHeading1: number;
+ /**
+ * @nameZH 二级标题字号
+ * @nameEN Font size of heading level 2
+ * @desc h2 标签所使用的字号
+ * @descEN Font size of h2 tag.
+ * @default 30
+ */
+ fontSizeHeading2: number;
+ /**
+ * @nameZH 三级标题字号
+ * @nameEN Font size of heading level 3
+ * @desc h3 标签使用的字号
+ * @descEN Font size of h3 tag.
+ * @default 24
+ */
+ fontSizeHeading3: number;
+ /**
+ * @nameZH 四级标题字号
+ * @nameEN Font size of heading level 4
+ * @desc h4 标签使用的字号
+ * @descEN Font size of h4 tag.
+ * @default 20
+ */
+ fontSizeHeading4: number;
+ /**
+ * @nameZH 五级标题字号
+ * @nameEN Font size of heading level 5
+ * @desc h5 标签使用的字号
+ * @descEN Font size of h5 tag.
+ * @default 16
+ */
+ fontSizeHeading5: number;
+
+ // LineHeight
+ /**
+ * @desc 文本行高
+ * @descEN Line height of text.
+ */
+ lineHeight: number;
+ /**
+ * @desc 大型文本行高
+ * @descEN Line height of large text.
+ */
+ lineHeightLG: number;
+ /**
+ * @desc 小型文本行高
+ * @descEN Line height of small text.
+ */
+ lineHeightSM: number;
+
+ // TextHeight
+ /**
+ * Round of fontSize * lineHeight
+ * @internal
+ */
+ fontHeight: number;
+ /**
+ * Round of fontSizeSM * lineHeightSM
+ * @internal
+ */
+ fontHeightSM: number;
+ /**
+ * Round of fontSizeLG * lineHeightLG
+ * @internal
+ */
+ fontHeightLG: number;
+
+ /**
+ * @nameZH 一级标题行高
+ * @nameEN Line height of heading level 1
+ * @desc H1 标签所使用的行高
+ * @descEN Line height of h1 tag.
+ * @default 1.4
+ */
+ lineHeightHeading1: number;
+ /**
+ * @nameZH 二级标题行高
+ * @nameEN Line height of heading level 2
+ * @desc h2 标签所使用的行高
+ * @descEN Line height of h2 tag.
+ * @default 1.35
+ */
+ lineHeightHeading2: number;
+ /**
+ * @nameZH 三级标题行高
+ * @nameEN Line height of heading level 3
+ * @desc h3 标签所使用的行高
+ * @descEN Line height of h3 tag.
+ * @default 1.3
+ */
+ lineHeightHeading3: number;
+ /**
+ * @nameZH 四级标题行高
+ * @nameEN Line height of heading level 4
+ * @desc h4 标签所使用的行高
+ * @descEN Line height of h4 tag.
+ * @default 1.25
+ */
+ lineHeightHeading4: number;
+ /**
+ * @nameZH 五级标题行高
+ * @nameEN Line height of heading level 5
+ * @desc h5 标签所使用的行高
+ * @descEN Line height of h5 tag.
+ * @default 1.2
+ */
+ lineHeightHeading5: number;
+}
diff --git a/components/_theme/interface/maps/index.ts b/components/_theme/interface/maps/index.ts
new file mode 100644
index 0000000000..29d3f53d74
--- /dev/null
+++ b/components/_theme/interface/maps/index.ts
@@ -0,0 +1,46 @@
+import type { ColorPalettes, LegacyColorPalettes } from '../presetColors';
+import type { SeedToken } from '../seeds';
+import type { ColorMapToken } from './colors';
+import type { FontMapToken } from './font';
+import type { HeightMapToken, SizeMapToken } from './size';
+import type { StyleMapToken } from './style';
+
+export * from './colors';
+export * from './font';
+export * from './size';
+export * from './style';
+
+export interface CommonMapToken extends StyleMapToken {
+ // Motion
+ /**
+ * @desc 动效播放速度，快速。用于小型元素动画交互
+ * @descEN Motion speed, fast speed. Used for small element animation interaction.
+ */
+ motionDurationFast: string;
+ /**
+ * @desc 动效播放速度，中速。用于中型元素动画交互
+ * @descEN Motion speed, medium speed. Used for medium element animation interaction.
+ */
+ motionDurationMid: string;
+ /**
+ * @desc 动效播放速度，慢速。用于大型元素如面板动画交互
+ * @descEN Motion speed, slow speed. Used for large element animation interaction.
+ */
+ motionDurationSlow: string;
+}
+
+// ======================================================================
+// == Map Token ==
+// ======================================================================
+// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
+
+export interface MapToken
+ extends SeedToken,
+ ColorPalettes,
+ LegacyColorPalettes,
+ ColorMapToken,
+ SizeMapToken,
+ HeightMapToken,
+ StyleMapToken,
+ FontMapToken,
+ CommonMapToken {}
diff --git a/components/_theme/interface/maps/size.ts b/components/_theme/interface/maps/size.ts
new file mode 100644
index 0000000000..f69f5a9278
--- /dev/null
+++ b/components/_theme/interface/maps/size.ts
@@ -0,0 +1,74 @@
+export interface SizeMapToken {
+ /**
+ * @nameZH XXL
+ * @default 48
+ */
+ sizeXXL: number;
+ /**
+ * @nameZH XL
+ * @default 32
+ */
+ sizeXL: number;
+ /**
+ * @nameZH LG
+ * @default 24
+ */
+ sizeLG: number;
+ /**
+ * @nameZH MD
+ * @default 20
+ */
+ sizeMD: number;
+ /** Same as size by default, but could be larger in compact mode */
+ sizeMS: number;
+ /**
+ * @nameZH 默认
+ * @desc 默认尺寸
+ * @default 16
+ */
+ size: number;
+ /**
+ * @nameZH SM
+ * @default 12
+ */
+ sizeSM: number;
+ /**
+ * @nameZH XS
+ * @default 8
+ */
+ sizeXS: number;
+ /**
+ * @nameZH XXS
+ * @default 4
+ */
+ sizeXXS: number;
+}
+
+export interface HeightMapToken {
+ // Control
+ /** Only Used for control inside component like Multiple Select inner selection item */
+
+ /**
+ * @nameZH 更小的组件高度
+ * @nameEN XS component height
+ * @desc 更小的组件高度
+ * @descEN XS component height
+ */
+ controlHeightXS: number;
+
+ /**
+ * @nameZH 较小的组件高度
+ * @nameEN SM component height
+ * @desc 较小的组件高度
+ * @descEN SM component height
+ */
+ controlHeightSM: number;
+
+ /**
+ * @nameZH 较高的组件高度
+ * @nameEN LG component height
+ * @desc 较高的组件高度
+ * @descEN LG component height
+ */
+ controlHeightLG: number;
+}
diff --git a/components/_theme/interface/maps/style.ts b/components/_theme/interface/maps/style.ts
new file mode 100644
index 0000000000..e4faf7dac8
--- /dev/null
+++ b/components/_theme/interface/maps/style.ts
@@ -0,0 +1,43 @@
+export interface StyleMapToken {
+ /**
+ * @nameZH 线宽
+ * @nameEN Line Width
+ * @desc 描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。
+ * @descEN The default line width of the outline class components, such as Button, Input, Select, etc.
+ * @default 1
+ */
+ lineWidthBold: number;
+
+ /**
+ * @nameZH XS号圆角
+ * @nameEN XS Border Radius
+ * @desc XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。
+ * @descEN XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius.
+ * @default 2
+ */
+ borderRadiusXS: number;
+ /**
+ * @nameZH SM号圆角
+ * @nameEN SM Border Radius
+ * @desc SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角
+ * @descEN SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size
+ * @default 4
+ */
+ borderRadiusSM: number;
+ /**
+ * @nameZH LG号圆角
+ * @nameEN LG Border Radius
+ * @desc LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。
+ * @descEN LG size border radius, used in some large border radius components, such as Card, Modal and other components.
+ * @default 8
+ */
+ borderRadiusLG: number;
+ /**
+ * @nameZH 外部圆角
+ * @nameEN Outer Border Radius
+ * @default 4
+ * @desc 外部圆角
+ * @descEN Outer border radius
+ */
+ borderRadiusOuter: number;
+}
diff --git a/components/_theme/interface/presetColors.ts b/components/_theme/interface/presetColors.ts
new file mode 100644
index 0000000000..e160935e6b
--- /dev/null
+++ b/components/_theme/interface/presetColors.ts
@@ -0,0 +1,32 @@
+export const PresetColors = [
+ 'blue',
+ 'purple',
+ 'cyan',
+ 'green',
+ 'magenta',
+ 'pink',
+ 'red',
+ 'orange',
+ 'yellow',
+ 'volcano',
+ 'geekblue',
+ 'lime',
+ 'gold',
+] as const;
+
+export type PresetColorKey = (typeof PresetColors)[number];
+
+export type PresetColorType = Record<PresetColorKey, string>;
+
+type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
+export type LegacyColorPalettes = {
+ /**
+ * @deprecated
+ */
+ [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
+};
+
+export type ColorPalettes = {
+ [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string;
+};
diff --git a/components/_theme/interface/seeds.ts b/components/_theme/interface/seeds.ts
new file mode 100644
index 0000000000..e7ac8a234d
--- /dev/null
+++ b/components/_theme/interface/seeds.ts
@@ -0,0 +1,279 @@
+import type { PresetColorType } from './presetColors';
+// ======================================================================
+// == Seed Token ==
+// ======================================================================
+// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
+
+export interface SeedToken extends PresetColorType {
+ // ---------- Color ---------- //
+
+ /**
+ * @nameZH 品牌主色
+ * @nameEN Brand Color
+ * @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义
+ * @descEN Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
+ */
+ colorPrimary: string;
+
+ /**
+ * @nameZH 成功色
+ * @nameEN Success Color
+ * @desc 用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。
+ * @descEN Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.
+ */
+ colorSuccess: string;
+
+ /**
+ * @nameZH 警戒色
+ * @nameEN Warning Color
+ * @desc 用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。
+ * @descEN Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.
+ */
+ colorWarning: string;
+
+ /**
+ * @nameZH 错误色
+ * @nameEN Error Color
+ * @desc 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。
+ * @descEN Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.
+ */
+ colorError: string;
+
+ /**
+ * @nameZH 信息色
+ * @nameEN Info Color
+ * @desc 用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。
+ * @descEN Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.
+ */
+ colorInfo: string;
+
+ /**
+ * @nameZH 基础文本色
+ * @nameEN Seed Text Color
+ * @desc 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
+ * @descEN Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
+ */
+ colorTextBase: string;
+
+ /**
+ * @nameZH 基础背景色
+ * @nameEN Seed Background Color
+ * @desc 用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
+ * @descEN Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
+ */
+ colorBgBase: string;
+
+ /**
+ * @nameZH 超链接颜色
+ * @nameEN Hyperlink color
+ * @desc 控制超链接的颜色。
+ * @descEN Control the color of hyperlink.
+ */
+ colorLink: string;
+
+ // ---------- Font ---------- //
+
+ /**
+ * @nameZH 字体
+ * @nameEN Font family for default text
+ * @desc Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。
+ * @descEN The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.
+ */
+ fontFamily: string;
+
+ /**
+ * @nameZH 代码字体
+ * @nameEN Font family for code text
+ * @desc 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素
+ * @descEN Code font, used for code, pre and kbd elements in Typography
+ */
+ fontFamilyCode: string;
+
+ /**
+ * @nameZH 默认字号
+ * @nameEN Default Font Size
+ * @desc 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。
+ * @descEN The most widely used font size in the design system, from which the text gradient will be derived.
+ * @default 14
+ */
+ fontSize: number;
+
+ // ---------- Line ---------- //
+
+ /**
+ * @nameZH 基础线宽
+ * @nameEN Base Line Width
+ * @desc 用于控制组件边框、分割线等的宽度
+ * @descEN Border width of base components
+ */
+ lineWidth: number;
+
+ /**
+ * @nameZH 线条样式
+ * @nameEN Line Style
+ * @desc 用于控制组件边框、分割线等的样式，默认是实线
+ * @descEN Border style of base components
+ */
+ lineType: string;
+
+ // ---------- BorderRadius ---------- //
+
+ /**
+ * @nameZH 基础圆角
+ * @nameEN Base Border Radius
+ * @descEN Border radius of base components
+ * @desc 基础组件的圆角大小，例如按钮、输入框、卡片等
+ */
+ borderRadius: number;
+
+ // ---------- Size ---------- //
+
+ /**
+ * @nameZH 尺寸变化单位
+ * @nameEN Size Change Unit
+ * @desc 用于控制组件尺寸的变化单位，在 Ant Design 中我们的基础单位为 4 ，便于更加细致地控制尺寸梯度
+ * @descEN The unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size step
+ * @default 4
+ */
+ sizeUnit: number;
+
+ /**
+ * @nameZH 尺寸步长
+ * @nameEN Size Base Step
+ * @desc 用于控制组件尺寸的基础步长，尺寸步长结合尺寸变化单位，就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式，例如 V5 紧凑模式下的尺寸步长为 2
+ * @descEN The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2
+ * @default 4
+ */
+ sizeStep: number;
+
+ /**
+ * @nameZH 组件箭头尺寸
+ * @desc 组件箭头的尺寸
+ * @descEN The size of the component arrow
+ */
+ sizePopupArrow: number;
+
+ /**
+ * @nameZH 基础高度
+ * @nameEN Base Control Height
+ * @desc Ant Design 中按钮和输入框等基础控件的高度
+ * @descEN The height of the basic controls such as buttons and input boxes in Ant Design
+ * @default 32
+ */
+ controlHeight: number;
+
+ // ---------- zIndex ---------- //
+
+ /**
+ * @nameZH 基础 zIndex
+ * @nameEN Base zIndex
+ * @desc 所有组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 BackTop、 Affix 等
+ * @descEN The base Z axis value of all components, which can be used to control the level of some floating components based on the Z axis value, such as BackTop, Affix, etc.
+ *
+ * @default 0
+ */
+ zIndexBase: number;
+
+ /**
+ * @nameZH 浮层基础 zIndex
+ * @nameEN popup base zIndex
+ * @desc 浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等
+ * @descEN Base zIndex of component like FloatButton, Affix which can be cover by large popup
+ * @default 1000
+ */
+ zIndexPopupBase: number;
+
+ // ---------- Opacity ---------- //
+
+ /**
+ * @nameZH 图片不透明度
+ * @nameEN Define default Image opacity. Useful when in dark-like theme
+ */
+ opacityImage: number;
+
+ // ---------- motion ---------- //
+ // TODO: 缺一个懂 motion 的人来收敛 Motion 相关的 Token
+
+ /**
+ * @nameZH 动画时长变化单位
+ * @nameEN Animation Duration Unit
+ * @desc 用于控制动画时长的变化单位
+ * @descEN The unit of animation duration change
+ * @default 100ms
+ */
+ motionUnit: number;
+
+ /**
+ * @nameZH 动画基础时长。
+ * @nameEN Animation Base Duration.
+ */
+ motionBase: number;
+
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
+ motionEaseOutCirc: string;
+
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
+ motionEaseInOutCirc: string;
+
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
+ motionEaseInOut: string;
+
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
+ motionEaseOutBack: string;
+
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
+ motionEaseInBack: string;
+
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
+ motionEaseInQuint: string;
+
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
+ motionEaseOutQuint: string;
+
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
+ motionEaseOut: string;
+
+ // ---------- Style ---------- //
+
+ /**
+ * @nameZH 线框风格
+ * @nameEN Wireframe Style
+ * @desc 用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项
+ * @descEN Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item
+ * @default false
+ */
+ wireframe: boolean;
+
+ /**
+ * @nameZH 动画风格
+ * @nameEN Motion Style
+ * @desc 用于配置动画效果，为 `false` 时则关闭动画
+ * @descEN Used to configure the motion effect, when it is `false`, the motion is turned off
+ * @default false
+ */
+ motion: boolean;
+}
diff --git a/components/_theme/internal.ts b/components/_theme/internal.ts
new file mode 100644
index 0000000000..a3061cd60f
--- /dev/null
+++ b/components/_theme/internal.ts
@@ -0,0 +1,51 @@
+import { useStyleRegister } from '../_util/_cssinjs';
+
+import type {
+ AliasToken,
+ GenerateStyle,
+ PresetColorKey,
+ PresetColorType,
+ SeedToken,
+ UseComponentStyleResult,
+} from './interface';
+import { PresetColors } from './interface';
+import useToken from './useToken';
+import type { FullToken, GetDefaultToken } from './util/genComponentStyleHook';
+import genComponentStyleHook, {
+ genSubStyleComponent,
+ genStyleHooks,
+} from './util/genComponentStyleHook';
+import genPresetColor from './util/genPresetColor';
+import statisticToken, { merge as mergeToken } from './util/statistic';
+import useResetIconStyle from './util/useResetIconStyle';
+import calc from './util/calc';
+import { getLineHeight } from './themes/shared/genFontSizes';
+
+export { defaultConfig, DesignTokenProvider } from './context';
+export {
+ PresetColors,
+ genComponentStyleHook,
+ genSubStyleComponent,
+ genPresetColor,
+ genStyleHooks,
+ mergeToken,
+ statisticToken,
+ calc,
+ getLineHeight,
+ // hooks
+ useResetIconStyle,
+ useStyleRegister,
+ useToken,
+};
+export type {
+ AliasToken,
+ // FIXME: Remove this type
+ AliasToken as DerivativeToken,
+ FullToken,
+ GenerateStyle,
+ PresetColorKey,
+ PresetColorType,
+ SeedToken,
+ UseComponentStyleResult,
+ GetDefaultToken,
+};
diff --git a/components/_theme/themes/ColorMap.ts b/components/_theme/themes/ColorMap.ts
new file mode 100644
index 0000000000..0a68210767
--- /dev/null
+++ b/components/_theme/themes/ColorMap.ts
@@ -0,0 +1,20 @@
+import type { ColorNeutralMapToken } from '../interface';
+
+export interface ColorMap {
+ 1: string;
+ 2: string;
+ 3: string;
+ 4: string;
+ 5: string;
+ 6: string;
+ 7: string;
+ 8: string;
+ 9: string;
+ 10: string;
+}
+
+export type GenerateColorMap = (baseColor: string) => ColorMap;
+export type GenerateNeutralColorMap = (
+ bgBaseColor: string,
+ textBaseColor: string,
+) => ColorNeutralMapToken;
diff --git a/components/_theme/themes/compact/genCompactSizeMapToken.ts b/components/_theme/themes/compact/genCompactSizeMapToken.ts
new file mode 100644
index 0000000000..b473808eca
--- /dev/null
+++ b/components/_theme/themes/compact/genCompactSizeMapToken.ts
@@ -0,0 +1,19 @@
+import type { SeedToken, SizeMapToken } from '../../interface';
+
+export default function genSizeMapToken(token: SeedToken): SizeMapToken {
+ const { sizeUnit, sizeStep } = token;
+
+ const compactSizeStep = sizeStep - 2;
+
+ return {
+ sizeXXL: sizeUnit * (compactSizeStep + 10),
+ sizeXL: sizeUnit * (compactSizeStep + 6),
+ sizeLG: sizeUnit * (compactSizeStep + 2),
+ sizeMD: sizeUnit * (compactSizeStep + 2),
+ sizeMS: sizeUnit * (compactSizeStep + 1),
+ size: sizeUnit * compactSizeStep,
+ sizeSM: sizeUnit * compactSizeStep,
+ sizeXS: sizeUnit * (compactSizeStep - 1),
+ sizeXXS: sizeUnit * (compactSizeStep - 1),
+ };
+}
diff --git a/components/_theme/themes/compact/index.ts b/components/_theme/themes/compact/index.ts
new file mode 100644
index 0000000000..5980b9dc2c
--- /dev/null
+++ b/components/_theme/themes/compact/index.ts
@@ -0,0 +1,27 @@
+import type { DerivativeFunc } from '../../../_util/_cssinjs';
+import genControlHeight from '../shared/genControlHeight';
+import type { MapToken, SeedToken } from '../../interface';
+import defaultAlgorithm from '../default';
+import genCompactSizeMapToken from './genCompactSizeMapToken';
+import genFontMapToken from '../shared/genFontMapToken';
+
+const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
+ const mergedMapToken = mapToken ?? defaultAlgorithm(token);
+
+ const fontSize = mergedMapToken.fontSizeSM; // Smaller size font-size as base
+ const controlHeight = mergedMapToken.controlHeight - 4;
+
+ return {
+ ...mergedMapToken,
+ ...genCompactSizeMapToken(mapToken ?? token),
+
+ // font
+ ...genFontMapToken(fontSize),
+
+ // controlHeight
+ controlHeight,
+ ...genControlHeight({ ...mergedMapToken, controlHeight }),
+ };
+};
+
+export default derivative;
diff --git a/components/_theme/themes/dark/colorAlgorithm.ts b/components/_theme/themes/dark/colorAlgorithm.ts
new file mode 100644
index 0000000000..cf395bc0ab
--- /dev/null
+++ b/components/_theme/themes/dark/colorAlgorithm.ts
@@ -0,0 +1,9 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+export const getAlphaColor = (baseColor: string, alpha: number) =>
+ new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+
+export const getSolidColor = (baseColor: string, brightness: number) => {
+ const instance = new TinyColor(baseColor);
+ return instance.lighten(brightness).toHexString();
+};
diff --git a/components/_theme/themes/dark/colors.ts b/components/_theme/themes/dark/colors.ts
new file mode 100644
index 0000000000..b3342c99a8
--- /dev/null
+++ b/components/_theme/themes/dark/colors.ts
@@ -0,0 +1,54 @@
+import { generate } from '@ant-design/colors';
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
+import { getAlphaColor, getSolidColor } from './colorAlgorithm';
+
+export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
+ const colors = generate(baseColor, { theme: 'dark' });
+ return {
+ 1: colors[0],
+ 2: colors[1],
+ 3: colors[2],
+ 4: colors[3],
+ 5: colors[6],
+ 6: colors[5],
+ 7: colors[4],
+ 8: colors[6],
+ 9: colors[5],
+ 10: colors[4],
+ // 8: colors[9],
+ // 9: colors[8],
+ // 10: colors[7],
+ };
+};
+
+export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
+ bgBaseColor: string,
+ textBaseColor: string,
+) => {
+ const colorBgBase = bgBaseColor || '#000';
+ const colorTextBase = textBaseColor || '#fff';
+
+ return {
+ colorBgBase,
+ colorTextBase,
+
+ colorText: getAlphaColor(colorTextBase, 0.85),
+ colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
+ colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
+ colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
+
+ colorFill: getAlphaColor(colorTextBase, 0.18),
+ colorFillSecondary: getAlphaColor(colorTextBase, 0.12),
+ colorFillTertiary: getAlphaColor(colorTextBase, 0.08),
+ colorFillQuaternary: getAlphaColor(colorTextBase, 0.04),
+
+ colorBgElevated: getSolidColor(colorBgBase, 12),
+ colorBgContainer: getSolidColor(colorBgBase, 8),
+ colorBgLayout: getSolidColor(colorBgBase, 0),
+ colorBgSpotlight: getSolidColor(colorBgBase, 26),
+ colorBgBlur: getAlphaColor(colorTextBase, 0.04),
+
+ colorBorder: getSolidColor(colorBgBase, 26),
+ colorBorderSecondary: getSolidColor(colorBgBase, 19),
+ };
+};
diff --git a/components/_theme/themes/dark/index.ts b/components/_theme/themes/dark/index.ts
new file mode 100644
index 0000000000..69e16a063b
--- /dev/null
+++ b/components/_theme/themes/dark/index.ts
@@ -0,0 +1,49 @@
+import { generate } from '@ant-design/colors';
+import type { DerivativeFunc } from '../../../_util/_cssinjs';
+import type {
+ ColorPalettes,
+ LegacyColorPalettes,
+ MapToken,
+ PresetColorType,
+ SeedToken,
+} from '../../interface';
+import { defaultPresetColors } from '../seed';
+import genColorMapToken from '../shared/genColorMapToken';
+import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
+import defaultAlgorithm from '../default';
+
+const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
+ const colorPalettes = Object.keys(defaultPresetColors)
+ .map((colorKey: keyof PresetColorType) => {
+ const colors = generate(token[colorKey], { theme: 'dark' });
+
+ return new Array(10).fill(1).reduce((prev, _, i) => {
+ prev[`${colorKey}-${i + 1}`] = colors[i];
+ prev[`${colorKey}${i + 1}`] = colors[i];
+ return prev;
+ }, {}) as ColorPalettes & LegacyColorPalettes;
+ })
+ .reduce((prev, cur) => {
+ prev = {
+ ...prev,
+ ...cur,
+ };
+ return prev;
+ }, {} as ColorPalettes & LegacyColorPalettes);
+
+ const mergedMapToken = mapToken ?? defaultAlgorithm(token);
+
+ return {
+ ...mergedMapToken,
+
+ // Dark tokens
+ ...colorPalettes,
+ // Colors
+ ...genColorMapToken(token, {
+ generateColorPalettes,
+ generateNeutralColorPalettes,
+ }),
+ };
+};
+
+export default derivative;
diff --git a/components/_theme/themes/default/colorAlgorithm.ts b/components/_theme/themes/default/colorAlgorithm.ts
new file mode 100644
index 0000000000..5ab75e6b1f
--- /dev/null
+++ b/components/_theme/themes/default/colorAlgorithm.ts
@@ -0,0 +1,9 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+export const getAlphaColor = (baseColor: string, alpha: number) =>
+ new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+
+export const getSolidColor = (baseColor: string, brightness: number) => {
+ const instance = new TinyColor(baseColor);
+ return instance.darken(brightness).toHexString();
+};
diff --git a/components/_theme/themes/default/colors.ts b/components/_theme/themes/default/colors.ts
new file mode 100644
index 0000000000..d0e684dd49
--- /dev/null
+++ b/components/_theme/themes/default/colors.ts
@@ -0,0 +1,54 @@
+import { generate } from '@ant-design/colors';
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
+import { getAlphaColor, getSolidColor } from './colorAlgorithm';
+
+export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
+ const colors = generate(baseColor);
+ return {
+ 1: colors[0],
+ 2: colors[1],
+ 3: colors[2],
+ 4: colors[3],
+ 5: colors[4],
+ 6: colors[5],
+ 7: colors[6],
+ 8: colors[4],
+ 9: colors[5],
+ 10: colors[6],
+ // 8: colors[7],
+ // 9: colors[8],
+ // 10: colors[9],
+ };
+};
+
+export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
+ bgBaseColor: string,
+ textBaseColor: string,
+) => {
+ const colorBgBase = bgBaseColor || '#fff';
+ const colorTextBase = textBaseColor || '#000';
+
+ return {
+ colorBgBase,
+ colorTextBase,
+
+ colorText: getAlphaColor(colorTextBase, 0.88),
+ colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
+ colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
+ colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
+
+ colorFill: getAlphaColor(colorTextBase, 0.15),
+ colorFillSecondary: getAlphaColor(colorTextBase, 0.06),
+ colorFillTertiary: getAlphaColor(colorTextBase, 0.04),
+ colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),
+
+ colorBgLayout: getSolidColor(colorBgBase, 4),
+ colorBgContainer: getSolidColor(colorBgBase, 0),
+ colorBgElevated: getSolidColor(colorBgBase, 0),
+ colorBgSpotlight: getAlphaColor(colorTextBase, 0.85),
+ colorBgBlur: 'transparent',
+
+ colorBorder: getSolidColor(colorBgBase, 15),
+ colorBorderSecondary: getSolidColor(colorBgBase, 6),
+ };
+};
diff --git a/components/_theme/themes/default/index.ts b/components/_theme/themes/default/index.ts
new file mode 100644
index 0000000000..d558e2cf87
--- /dev/null
+++ b/components/_theme/themes/default/index.ts
@@ -0,0 +1,53 @@
+import { generate } from '@ant-design/colors';
+import genControlHeight from '../shared/genControlHeight';
+import genSizeMapToken from '../shared/genSizeMapToken';
+import type {
+ ColorPalettes,
+ LegacyColorPalettes,
+ MapToken,
+ PresetColorType,
+ SeedToken,
+} from '../../interface';
+import { defaultPresetColors } from '../seed';
+import genColorMapToken from '../shared/genColorMapToken';
+import genCommonMapToken from '../shared/genCommonMapToken';
+import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
+import genFontMapToken from '../shared/genFontMapToken';
+
+export default function derivative(token: SeedToken): MapToken {
+ const colorPalettes = Object.keys(defaultPresetColors)
+ .map((colorKey: keyof PresetColorType) => {
+ const colors = generate(token[colorKey]);
+
+ return new Array(10).fill(1).reduce((prev, _, i) => {
+ prev[`${colorKey}-${i + 1}`] = colors[i];
+ prev[`${colorKey}${i + 1}`] = colors[i];
+ return prev;
+ }, {}) as ColorPalettes & LegacyColorPalettes;
+ })
+ .reduce((prev, cur) => {
+ prev = {
+ ...prev,
+ ...cur,
+ };
+ return prev;
+ }, {} as ColorPalettes & LegacyColorPalettes);
+
+ return {
+ ...token,
+ ...colorPalettes,
+ // Colors
+ ...genColorMapToken(token, {
+ generateColorPalettes,
+ generateNeutralColorPalettes,
+ }),
+ // Font
+ ...genFontMapToken(token.fontSize),
+ // Size
+ ...genSizeMapToken(token),
+ // Height
+ ...genControlHeight(token),
+ // Others
+ ...genCommonMapToken(token),
+ };
+}
diff --git a/components/_theme/themes/seed.ts b/components/_theme/themes/seed.ts
new file mode 100644
index 0000000000..e24925bbf7
--- /dev/null
+++ b/components/_theme/themes/seed.ts
@@ -0,0 +1,81 @@
+import type { PresetColorType, SeedToken } from '../internal';
+
+export const defaultPresetColors: PresetColorType = {
+ blue: '#1677ff',
+ purple: '#722ED1',
+ cyan: '#13C2C2',
+ green: '#52C41A',
+ magenta: '#EB2F96',
+ pink: '#eb2f96',
+ red: '#F5222D',
+ orange: '#FA8C16',
+ yellow: '#FADB14',
+ volcano: '#FA541C',
+ geekblue: '#2F54EB',
+ gold: '#FAAD14',
+ lime: '#A0D911',
+};
+
+const seedToken: SeedToken = {
+ // preset color palettes
+ ...defaultPresetColors,
+
+ // Color
+ colorPrimary: '#1677ff',
+ colorSuccess: '#52c41a',
+ colorWarning: '#faad14',
+ colorError: '#ff4d4f',
+ colorInfo: '#1677ff',
+ colorLink: '',
+ colorTextBase: '',
+
+ colorBgBase: '',
+
+ // Font
+ fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+'Noto Color Emoji'`,
+ fontFamilyCode: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
+ fontSize: 14,
+
+ // Line
+ lineWidth: 1,
+ lineType: 'solid',
+
+ // Motion
+ motionUnit: 0.1,
+ motionBase: 0,
+ motionEaseOutCirc: 'cubic-bezier(0.08, 0.82, 0.17, 1)',
+ motionEaseInOutCirc: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
+ motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+ motionEaseInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+ motionEaseOutBack: 'cubic-bezier(0.12, 0.4, 0.29, 1.46)',
+ motionEaseInBack: 'cubic-bezier(0.71, -0.46, 0.88, 0.6)',
+ motionEaseInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+ motionEaseOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
+
+ // Radius
+ borderRadius: 6,
+
+ // Size
+ sizeUnit: 4,
+ sizeStep: 4,
+ sizePopupArrow: 16,
+
+ // Control Base
+ controlHeight: 32,
+
+ // zIndex
+ zIndexBase: 0,
+ zIndexPopupBase: 1000,
+
+ // Image
+ opacityImage: 1,
+
+ // Wireframe
+ wireframe: false,
+
+ // Motion
+ motion: true,
+};
+export default seedToken;
diff --git a/components/_theme/themes/shared/genColorMapToken.ts b/components/_theme/themes/shared/genColorMapToken.ts
new file mode 100644
index 0000000000..3a3aa8d6db
--- /dev/null
+++ b/components/_theme/themes/shared/genColorMapToken.ts
@@ -0,0 +1,100 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import type { ColorMapToken, SeedToken } from '../../interface';
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
+
+interface PaletteGenerators {
+ generateColorPalettes: GenerateColorMap;
+ generateNeutralColorPalettes: GenerateNeutralColorMap;
+}
+
+export default function genColorMapToken(
+ seed: SeedToken,
+ { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators,
+): ColorMapToken {
+ const {
+ colorSuccess: colorSuccessBase,
+ colorWarning: colorWarningBase,
+ colorError: colorErrorBase,
+ colorInfo: colorInfoBase,
+ colorPrimary: colorPrimaryBase,
+ colorBgBase,
+ colorTextBase,
+ } = seed;
+
+ const primaryColors = generateColorPalettes(colorPrimaryBase);
+ const successColors = generateColorPalettes(colorSuccessBase);
+ const warningColors = generateColorPalettes(colorWarningBase);
+ const errorColors = generateColorPalettes(colorErrorBase);
+ const infoColors = generateColorPalettes(colorInfoBase);
+ const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
+
+ // Color Link
+ const colorLink = seed.colorLink || seed.colorInfo;
+ const linkColors = generateColorPalettes(colorLink);
+
+ return {
+ ...neutralColors,
+
+ colorPrimaryBg: primaryColors[1],
+ colorPrimaryBgHover: primaryColors[2],
+ colorPrimaryBorder: primaryColors[3],
+ colorPrimaryBorderHover: primaryColors[4],
+ colorPrimaryHover: primaryColors[5],
+ colorPrimary: primaryColors[6],
+ colorPrimaryActive: primaryColors[7],
+ colorPrimaryTextHover: primaryColors[8],
+ colorPrimaryText: primaryColors[9],
+ colorPrimaryTextActive: primaryColors[10],
+
+ colorSuccessBg: successColors[1],
+ colorSuccessBgHover: successColors[2],
+ colorSuccessBorder: successColors[3],
+ colorSuccessBorderHover: successColors[4],
+ colorSuccessHover: successColors[4],
+ colorSuccess: successColors[6],
+ colorSuccessActive: successColors[7],
+ colorSuccessTextHover: successColors[8],
+ colorSuccessText: successColors[9],
+ colorSuccessTextActive: successColors[10],
+
+ colorErrorBg: errorColors[1],
+ colorErrorBgHover: errorColors[2],
+ colorErrorBorder: errorColors[3],
+ colorErrorBorderHover: errorColors[4],
+ colorErrorHover: errorColors[5],
+ colorError: errorColors[6],
+ colorErrorActive: errorColors[7],
+ colorErrorTextHover: errorColors[8],
+ colorErrorText: errorColors[9],
+ colorErrorTextActive: errorColors[10],
+
+ colorWarningBg: warningColors[1],
+ colorWarningBgHover: warningColors[2],
+ colorWarningBorder: warningColors[3],
+ colorWarningBorderHover: warningColors[4],
+ colorWarningHover: warningColors[4],
+ colorWarning: warningColors[6],
+ colorWarningActive: warningColors[7],
+ colorWarningTextHover: warningColors[8],
+ colorWarningText: warningColors[9],
+ colorWarningTextActive: warningColors[10],
+
+ colorInfoBg: infoColors[1],
+ colorInfoBgHover: infoColors[2],
+ colorInfoBorder: infoColors[3],
+ colorInfoBorderHover: infoColors[4],
+ colorInfoHover: infoColors[4],
+ colorInfo: infoColors[6],
+ colorInfoActive: infoColors[7],
+ colorInfoTextHover: infoColors[8],
+ colorInfoText: infoColors[9],
+ colorInfoTextActive: infoColors[10],
+
+ colorLinkHover: linkColors[4],
+ colorLink: linkColors[6],
+ colorLinkActive: linkColors[7],
+
+ colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+ colorWhite: '#fff',
+ };
+}
diff --git a/components/_theme/themes/shared/genCommonMapToken.ts b/components/_theme/themes/shared/genCommonMapToken.ts
new file mode 100644
index 0000000000..7561e9cd21
--- /dev/null
+++ b/components/_theme/themes/shared/genCommonMapToken.ts
@@ -0,0 +1,19 @@
+import type { CommonMapToken, SeedToken } from '../../interface';
+import genRadius from './genRadius';
+
+export default function genCommonMapToken(token: SeedToken): CommonMapToken {
+ const { motionUnit, motionBase, borderRadius, lineWidth } = token;
+
+ return {
+ // motion
+ motionDurationFast: `${(motionBase + motionUnit).toFixed(1)}s`,
+ motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
+ motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
+
+ // line
+ lineWidthBold: lineWidth + 1,
+
+ // radius
+ ...genRadius(borderRadius),
+ };
+}
diff --git a/components/_theme/themes/shared/genControlHeight.ts b/components/_theme/themes/shared/genControlHeight.ts
new file mode 100644
index 0000000000..5303b6946f
--- /dev/null
+++ b/components/_theme/themes/shared/genControlHeight.ts
@@ -0,0 +1,13 @@
+import type { HeightMapToken, SeedToken } from '../../interface';
+
+const genControlHeight = (token: SeedToken): HeightMapToken => {
+ const { controlHeight } = token;
+
+ return {
+ controlHeightSM: controlHeight * 0.75,
+ controlHeightXS: controlHeight * 0.5,
+ controlHeightLG: controlHeight * 1.25,
+ };
+};
+
+export default genControlHeight;
diff --git a/components/_theme/themes/shared/genFontMapToken.ts b/components/_theme/themes/shared/genFontMapToken.ts
new file mode 100644
index 0000000000..8cd58e7e21
--- /dev/null
+++ b/components/_theme/themes/shared/genFontMapToken.ts
@@ -0,0 +1,44 @@
+import type { FontMapToken } from '../../interface';
+import genFontSizes from './genFontSizes';
+
+const genFontMapToken = (fontSize: number): FontMapToken => {
+ const fontSizePairs = genFontSizes(fontSize);
+ const fontSizes = fontSizePairs.map(pair => pair.size);
+ const lineHeights = fontSizePairs.map(pair => pair.lineHeight);
+
+ const fontSizeMD = fontSizes[1];
+ const fontSizeSM = fontSizes[0];
+ const fontSizeLG = fontSizes[2];
+ const lineHeight = lineHeights[1];
+ const lineHeightSM = lineHeights[0];
+ const lineHeightLG = lineHeights[2];
+
+ return {
+ fontSizeSM,
+ fontSize: fontSizeMD,
+ fontSizeLG,
+ fontSizeXL: fontSizes[3],
+
+ fontSizeHeading1: fontSizes[6],
+ fontSizeHeading2: fontSizes[5],
+ fontSizeHeading3: fontSizes[4],
+ fontSizeHeading4: fontSizes[3],
+ fontSizeHeading5: fontSizes[2],
+
+ lineHeight,
+ lineHeightLG,
+ lineHeightSM,
+
+ fontHeight: Math.round(lineHeight * fontSizeMD),
+ fontHeightLG: Math.round(lineHeightLG * fontSizeLG),
+ fontHeightSM: Math.round(lineHeightSM * fontSizeSM),
+
+ lineHeightHeading1: lineHeights[6],
+ lineHeightHeading2: lineHeights[5],
+ lineHeightHeading3: lineHeights[4],
+ lineHeightHeading4: lineHeights[3],
+ lineHeightHeading5: lineHeights[2],
+ };
+};
+
+export default genFontMapToken;
diff --git a/components/_theme/themes/shared/genFontSizes.ts b/components/_theme/themes/shared/genFontSizes.ts
new file mode 100644
index 0000000000..47c027d498
--- /dev/null
+++ b/components/_theme/themes/shared/genFontSizes.ts
@@ -0,0 +1,22 @@
+export function getLineHeight(fontSize: number) {
+ return (fontSize + 8) / fontSize;
+}
+
+// https://zhuanlan.zhihu.com/p/32746810
+export default function getFontSizes(base: number) {
+ const fontSizes = new Array(10).fill(null).map((_, index) => {
+ const i = index - 1;
+ const baseSize = base * 2.71828 ** (i / 5);
+ const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize);
+
+ // Convert to even
+ return Math.floor(intSize / 2) * 2;
+ });
+
+ fontSizes[1] = base;
+
+ return fontSizes.map(size => ({
+ size,
+ lineHeight: getLineHeight(size),
+ }));
+}
diff --git a/components/_theme/themes/shared/genRadius.ts b/components/_theme/themes/shared/genRadius.ts
new file mode 100644
index 0000000000..0bac4c9887
--- /dev/null
+++ b/components/_theme/themes/shared/genRadius.ts
@@ -0,0 +1,59 @@
+import type { MapToken } from '../../interface';
+
+const genRadius = (
+ radiusBase: number,
+): Pick<
+ MapToken,
+ 'borderRadiusXS' | 'borderRadiusSM' | 'borderRadiusLG' | 'borderRadius' | 'borderRadiusOuter'
+> => {
+ let radiusLG = radiusBase;
+ let radiusSM = radiusBase;
+ let radiusXS = radiusBase;
+ let radiusOuter = radiusBase;
+
+ // radiusLG
+ if (radiusBase < 6 && radiusBase >= 5) {
+ radiusLG = radiusBase + 1;
+ } else if (radiusBase < 16 && radiusBase >= 6) {
+ radiusLG = radiusBase + 2;
+ } else if (radiusBase >= 16) {
+ radiusLG = 16;
+ }
+
+ // radiusSM
+ if (radiusBase < 7 && radiusBase >= 5) {
+ radiusSM = 4;
+ } else if (radiusBase < 8 && radiusBase >= 7) {
+ radiusSM = 5;
+ } else if (radiusBase < 14 && radiusBase >= 8) {
+ radiusSM = 6;
+ } else if (radiusBase < 16 && radiusBase >= 14) {
+ radiusSM = 7;
+ } else if (radiusBase >= 16) {
+ radiusSM = 8;
+ }
+
+ // radiusXS
+ if (radiusBase < 6 && radiusBase >= 2) {
+ radiusXS = 1;
+ } else if (radiusBase >= 6) {
+ radiusXS = 2;
+ }
+
+ // radiusOuter
+ if (radiusBase > 4 && radiusBase < 8) {
+ radiusOuter = 4;
+ } else if (radiusBase >= 8) {
+ radiusOuter = 6;
+ }
+
+ return {
+ borderRadius: radiusBase,
+ borderRadiusXS: radiusXS,
+ borderRadiusSM: radiusSM,
+ borderRadiusLG: radiusLG,
+ borderRadiusOuter: radiusOuter,
+ };
+};
+
+export default genRadius;
diff --git a/components/_theme/themes/shared/genSizeMapToken.ts b/components/_theme/themes/shared/genSizeMapToken.ts
new file mode 100644
index 0000000000..3449c24dfe
--- /dev/null
+++ b/components/_theme/themes/shared/genSizeMapToken.ts
@@ -0,0 +1,17 @@
+import type { SeedToken, SizeMapToken } from '../../interface';
+
+export default function genSizeMapToken(token: SeedToken): SizeMapToken {
+ const { sizeUnit, sizeStep } = token;
+
+ return {
+ sizeXXL: sizeUnit * (sizeStep + 8), // 48
+ sizeXL: sizeUnit * (sizeStep + 4), // 32
+ sizeLG: sizeUnit * (sizeStep + 2), // 24
+ sizeMD: sizeUnit * (sizeStep + 1), // 20
+ sizeMS: sizeUnit * sizeStep, // 16
+ size: sizeUnit * sizeStep, // 16
+ sizeSM: sizeUnit * (sizeStep - 1), // 12
+ sizeXS: sizeUnit * (sizeStep - 2), // 8
+ sizeXXS: sizeUnit * (sizeStep - 3), // 4
+ };
+}
diff --git a/components/_theme/useToken.ts b/components/_theme/useToken.ts
new file mode 100644
index 0000000000..fa4e94fe54
--- /dev/null
+++ b/components/_theme/useToken.ts
@@ -0,0 +1,160 @@
+import type { Theme } from '../_util/_cssinjs';
+import { useCacheToken } from '../_util/_cssinjs';
+
+import version from '../version';
+import type { DesignTokenProviderProps } from './context';
+import { defaultTheme, useDesignTokenInject } from './context';
+import type { AliasToken, GlobalToken, MapToken, SeedToken } from './interface';
+import defaultSeedToken from './themes/seed';
+import formatToken from './util/alias';
+import { computed } from 'vue';
+import type { ComputedRef } from 'vue';
+
+export const unitless: {
+ [key in keyof AliasToken]?: boolean;
+} = {
+ lineHeight: true,
+ lineHeightSM: true,
+ lineHeightLG: true,
+ lineHeightHeading1: true,
+ lineHeightHeading2: true,
+ lineHeightHeading3: true,
+ lineHeightHeading4: true,
+ lineHeightHeading5: true,
+ opacityLoading: true,
+ fontWeightStrong: true,
+ zIndexPopupBase: true,
+ zIndexBase: true,
+};
+
+export const ignore: {
+ [key in keyof AliasToken]?: boolean;
+} = {
+ size: true,
+ sizeSM: true,
+ sizeLG: true,
+ sizeMD: true,
+ sizeXS: true,
+ sizeXXS: true,
+ sizeMS: true,
+ sizeXL: true,
+ sizeXXL: true,
+ sizeUnit: true,
+ sizeStep: true,
+ motionBase: true,
+ motionUnit: true,
+};
+
+const preserve: {
+ [key in keyof AliasToken]?: boolean;
+} = {
+ screenXS: true,
+ screenXSMin: true,
+ screenXSMax: true,
+ screenSM: true,
+ screenSMMin: true,
+ screenSMMax: true,
+ screenMD: true,
+ screenMDMin: true,
+ screenMDMax: true,
+ screenLG: true,
+ screenLGMin: true,
+ screenLGMax: true,
+ screenXL: true,
+ screenXLMin: true,
+ screenXLMax: true,
+ screenXXL: true,
+ screenXXLMin: true,
+ screenXXLMax: true,
+ screenXXXL: true,
+ screenXXXLMin: true,
+};
+
+export const getComputedToken = (
+ originToken: SeedToken,
+ overrideToken: DesignTokenProviderProps['components'] & {
+ override?: Partial<AliasToken>;
+ },
+ theme: Theme<any, any>,
+) => {
+ const derivativeToken = theme.getDerivativeToken(originToken);
+
+ const { override, ...components } = overrideToken;
+
+ // Merge with override
+ let mergedDerivativeToken = {
+ ...derivativeToken,
+ override,
+ };
+
+ // Format if needed
+ mergedDerivativeToken = formatToken(mergedDerivativeToken);
+
+ if (components) {
+ Object.entries(components).forEach(([key, value]) => {
+ const { theme: componentTheme, ...componentTokens } = value;
+ let mergedComponentToken = componentTokens;
+ if (componentTheme) {
+ mergedComponentToken = getComputedToken(
+ {
+ ...mergedDerivativeToken,
+ ...componentTokens,
+ },
+ {
+ override: componentTokens,
+ },
+ componentTheme,
+ );
+ }
+ mergedDerivativeToken[key] = mergedComponentToken;
+ });
+ }
+
+ return mergedDerivativeToken;
+};
+
+// ================================== Hook ==================================
+export default function useToken(): [
+ ComputedRef<Theme<SeedToken, MapToken>>,
+ ComputedRef<GlobalToken>,
+ ComputedRef<string>,
+ ComputedRef<GlobalToken>,
+ ComputedRef<DesignTokenProviderProps['cssVar']>,
+] {
+ const designToken = useDesignTokenInject();
+
+ const salt = computed(() => `${version}-${designToken.value.hashed || ''}`);
+
+ const mergedTheme = computed(() => designToken.value.theme || defaultTheme);
+
+ const cacheToken = useCacheToken<GlobalToken, SeedToken>(
+ mergedTheme,
+ computed(() => [defaultSeedToken, designToken.value.token]),
+ computed(() => {
+ return {
+ salt: salt.value,
+ override: designToken.value.override,
+ getComputedToken,
+ // formatToken will not be consumed after 1.15.0 with getComputedToken.
+ // But token will break if @ant-design/cssinjs is under 1.15.0 without it
+ formatToken,
+ cssVar: designToken.value.cssVar && {
+ prefix: designToken.value.cssVar.prefix,
+ key: designToken.value.cssVar.key,
+ unitless,
+ ignore,
+ preserve,
+ },
+ };
+ }),
+ );
+
+ // cacheToken [token, hashId, realToken]
+ return [
+ mergedTheme,
+ computed(() => cacheToken.value[2]),
+ computed(() => cacheToken.value[1]),
+ computed(() => cacheToken.value[0]),
+ computed(() => designToken.value.cssVar),
+ ];
+}
diff --git a/components/_theme/util/alias.ts b/components/_theme/util/alias.ts
new file mode 100644
index 0000000000..6b85352844
--- /dev/null
+++ b/components/_theme/util/alias.ts
@@ -0,0 +1,207 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../interface';
+import seedToken from '../themes/seed';
+import getAlphaColor from './getAlphaColor';
+
+/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
+type RawMergedToken = MapToken & OverrideToken & { override: Partial<AliasToken> };
+
+/**
+ * Seed (designer) > Derivative (designer) > Alias (developer).
+ *
+ * Merge seed & derivative & override token and generate alias token for developer.
+ */
+export default function formatToken(derivativeToken: RawMergedToken): AliasToken {
+ const { override, ...restToken } = derivativeToken;
+ const overrideTokens = { ...override };
+
+ Object.keys(seedToken).forEach(token => {
+ delete overrideTokens[token as keyof SeedToken];
+ });
+
+ const mergedToken = {
+ ...restToken,
+ ...overrideTokens,
+ };
+
+ const screenXS = 480;
+ const screenSM = 576;
+ const screenMD = 768;
+ const screenLG = 992;
+ const screenXL = 1200;
+ const screenXXL = 1600;
+ const screenXXXL = 2000;
+
+ // Motion
+ if (mergedToken.motion === false) {
+ const fastDuration = '0s';
+ mergedToken.motionDurationFast = fastDuration;
+ mergedToken.motionDurationMid = fastDuration;
+ mergedToken.motionDurationSlow = fastDuration;
+ }
+
+ // Generate alias token
+ const aliasToken: AliasToken = {
+ ...mergedToken,
+
+ // ============== Background ============== //
+ colorFillContent: mergedToken.colorFillSecondary,
+ colorFillContentHover: mergedToken.colorFill,
+ colorFillAlter: mergedToken.colorFillQuaternary,
+ colorBgContainerDisabled: mergedToken.colorFillTertiary,
+
+ // ============== Split ============== //
+ colorBorderBg: mergedToken.colorBgContainer,
+ colorSplit: getAlphaColor(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer),
+
+ // ============== Text ============== //
+ colorTextPlaceholder: mergedToken.colorTextQuaternary,
+ colorTextDisabled: mergedToken.colorTextQuaternary,
+ colorTextHeading: mergedToken.colorText,
+ colorTextLabel: mergedToken.colorTextSecondary,
+ colorTextDescription: mergedToken.colorTextTertiary,
+ colorTextLightSolid: mergedToken.colorWhite,
+ colorHighlight: mergedToken.colorError,
+ colorBgTextHover: mergedToken.colorFillSecondary,
+ colorBgTextActive: mergedToken.colorFill,
+
+ colorIcon: mergedToken.colorTextTertiary,
+ colorIconHover: mergedToken.colorText,
+
+ colorErrorOutline: getAlphaColor(mergedToken.colorErrorBg, mergedToken.colorBgContainer),
+ colorWarningOutline: getAlphaColor(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
+
+ // Font
+ fontSizeIcon: mergedToken.fontSizeSM,
+
+ // Line
+ lineWidthFocus: mergedToken.lineWidth * 4,
+
+ // Control
+ lineWidth: mergedToken.lineWidth,
+ controlOutlineWidth: mergedToken.lineWidth * 2,
+ // Checkbox size and expand icon size
+ controlInteractiveSize: mergedToken.controlHeight / 2,
+
+ controlItemBgHover: mergedToken.colorFillTertiary,
+ controlItemBgActive: mergedToken.colorPrimaryBg,
+ controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
+ controlItemBgActiveDisabled: mergedToken.colorFill,
+ controlTmpOutline: mergedToken.colorFillQuaternary,
+ controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
+
+ lineType: mergedToken.lineType,
+ borderRadius: mergedToken.borderRadius,
+ borderRadiusXS: mergedToken.borderRadiusXS,
+ borderRadiusSM: mergedToken.borderRadiusSM,
+ borderRadiusLG: mergedToken.borderRadiusLG,
+
+ fontWeightStrong: 600,
+
+ opacityLoading: 0.65,
+
+ linkDecoration: 'none',
+ linkHoverDecoration: 'none',
+ linkFocusDecoration: 'none',
+
+ controlPaddingHorizontal: 12,
+ controlPaddingHorizontalSM: 8,
+
+ paddingXXS: mergedToken.sizeXXS,
+ paddingXS: mergedToken.sizeXS,
+ paddingSM: mergedToken.sizeSM,
+ padding: mergedToken.size,
+ paddingMD: mergedToken.sizeMD,
+ paddingLG: mergedToken.sizeLG,
+ paddingXL: mergedToken.sizeXL,
+
+ paddingContentHorizontalLG: mergedToken.sizeLG,
+ paddingContentVerticalLG: mergedToken.sizeMS,
+ paddingContentHorizontal: mergedToken.sizeMS,
+ paddingContentVertical: mergedToken.sizeSM,
+ paddingContentHorizontalSM: mergedToken.size,
+ paddingContentVerticalSM: mergedToken.sizeXS,
+
+ marginXXS: mergedToken.sizeXXS,
+ marginXS: mergedToken.sizeXS,
+ marginSM: mergedToken.sizeSM,
+ margin: mergedToken.size,
+ marginMD: mergedToken.sizeMD,
+ marginLG: mergedToken.sizeLG,
+ marginXL: mergedToken.sizeXL,
+ marginXXL: mergedToken.sizeXXL,
+
+ boxShadow: `
+ 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+ 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05)
+ `,
+ boxShadowSecondary: `
+ 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+ 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05)
+ `,
+ boxShadowTertiary: `
+ 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+ 0 1px 6px -1px rgba(0, 0, 0, 0.02),
+ 0 2px 4px 0 rgba(0, 0, 0, 0.02)
+ `,
+
+ screenXS,
+ screenXSMin: screenXS,
+ screenXSMax: screenSM - 1,
+ screenSM,
+ screenSMMin: screenSM,
+ screenSMMax: screenMD - 1,
+ screenMD,
+ screenMDMin: screenMD,
+ screenMDMax: screenLG - 1,
+ screenLG,
+ screenLGMin: screenLG,
+ screenLGMax: screenXL - 1,
+ screenXL,
+ screenXLMin: screenXL,
+ screenXLMax: screenXXL - 1,
+ screenXXL,
+ screenXXLMin: screenXXL,
+ screenXXLMax: screenXXXL - 1,
+ screenXXXL,
+ screenXXXLMin: screenXXXL,
+
+ boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
+ boxShadowCard: `
+ 0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
+ 0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
+ 0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
+ `,
+ boxShadowDrawerRight: `
+ -6px 0 16px 0 rgba(0, 0, 0, 0.08),
+ -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+ -9px 0 28px 8px rgba(0, 0, 0, 0.05)
+ `,
+ boxShadowDrawerLeft: `
+ 6px 0 16px 0 rgba(0, 0, 0, 0.08),
+ 3px 0 6px -4px rgba(0, 0, 0, 0.12),
+ 9px 0 28px 8px rgba(0, 0, 0, 0.05)
+ `,
+ boxShadowDrawerUp: `
+ 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+ 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05)
+ `,
+ boxShadowDrawerDown: `
+ 0 -6px 16px 0 rgba(0, 0, 0, 0.08),
+ 0 -3px 6px -4px rgba(0, 0, 0, 0.12),
+ 0 -9px 28px 8px rgba(0, 0, 0, 0.05)
+ `,
+ boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)',
+ boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)',
+ boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)',
+ boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)',
+
+ // Override AliasToken
+ ...overrideTokens,
+ };
+
+ return aliasToken;
+}
diff --git a/components/_theme/util/calc/CSSCalculator.ts b/components/_theme/util/calc/CSSCalculator.ts
new file mode 100644
index 0000000000..b1c472596c
--- /dev/null
+++ b/components/_theme/util/calc/CSSCalculator.ts
@@ -0,0 +1,87 @@
+import AbstractCalculator from './calculator';
+
+const CALC_UNIT = 'CALC_UNIT';
+
+function unit(value: string | number) {
+ if (typeof value === 'number') {
+ return `${value}${CALC_UNIT}`;
+ }
+ return value;
+}
+
+export default class CSSCalculator extends AbstractCalculator {
+ result = '';
+
+ lowPriority?: boolean;
+
+ constructor(num: number | string | AbstractCalculator) {
+ super();
+ if (num instanceof CSSCalculator) {
+ this.result = `(${num.result})`;
+ } else if (typeof num === 'number') {
+ this.result = unit(num);
+ } else if (typeof num === 'string') {
+ this.result = num;
+ }
+ }
+
+ add(num: number | string | AbstractCalculator): this {
+ if (num instanceof CSSCalculator) {
+ this.result = `${this.result} + ${num.getResult()}`;
+ } else if (typeof num === 'number' || typeof num === 'string') {
+ this.result = `${this.result} + ${unit(num)}`;
+ }
+ this.lowPriority = true;
+ return this;
+ }
+
+ sub(num: number | string | AbstractCalculator): this {
+ if (num instanceof CSSCalculator) {
+ this.result = `${this.result} - ${num.getResult()}`;
+ } else if (typeof num === 'number' || typeof num === 'string') {
+ this.result = `${this.result} - ${unit(num)}`;
+ }
+ this.lowPriority = true;
+ return this;
+ }
+
+ mul(num: number | string | AbstractCalculator): this {
+ if (this.lowPriority) {
+ this.result = `(${this.result})`;
+ }
+ if (num instanceof CSSCalculator) {
+ this.result = `${this.result} * ${num.getResult(true)}`;
+ } else if (typeof num === 'number' || typeof num === 'string') {
+ this.result = `${this.result} * ${num}`;
+ }
+ this.lowPriority = false;
+ return this;
+ }
+
+ div(num: number | string | AbstractCalculator): this {
+ if (this.lowPriority) {
+ this.result = `(${this.result})`;
+ }
+ if (num instanceof CSSCalculator) {
+ this.result = `${this.result} / ${num.getResult(true)}`;
+ } else if (typeof num === 'number' || typeof num === 'string') {
+ this.result = `${this.result} / ${num}`;
+ }
+ this.lowPriority = false;
+ return this;
+ }
+
+ getResult(force?: boolean): string {
+ return this.lowPriority || force ? `(${this.result})` : this.result;
+ }
+
+ equal(options?: { unit?: boolean }): string {
+ const { unit: cssUnit = true } = options || {};
+ const regexp = new RegExp(`${CALC_UNIT}`, 'g');
+ this.result = this.result.replace(regexp, cssUnit ? 'px' : '');
+ if (typeof this.lowPriority !== 'undefined') {
+ return `calc(${this.result})`;
+ }
+ return this.result;
+ }
+}
diff --git a/components/_theme/util/calc/NumCalculator.ts b/components/_theme/util/calc/NumCalculator.ts
new file mode 100644
index 0000000000..5e845e5f50
--- /dev/null
+++ b/components/_theme/util/calc/NumCalculator.ts
@@ -0,0 +1,54 @@
+import AbstractCalculator from './calculator';
+
+export default class NumCalculator extends AbstractCalculator {
+ result = 0;
+
+ constructor(num: number | string | AbstractCalculator) {
+ super();
+ if (num instanceof NumCalculator) {
+ this.result = num.result;
+ } else if (typeof num === 'number') {
+ this.result = num;
+ }
+ }
+
+ add(num: number | string | AbstractCalculator): this {
+ if (num instanceof NumCalculator) {
+ this.result += num.result;
+ } else if (typeof num === 'number') {
+ this.result += num;
+ }
+ return this;
+ }
+
+ sub(num: number | string | AbstractCalculator): this {
+ if (num instanceof NumCalculator) {
+ this.result -= num.result;
+ } else if (typeof num === 'number') {
+ this.result -= num;
+ }
+ return this;
+ }
+
+ mul(num: number | string | AbstractCalculator): this {
+ if (num instanceof NumCalculator) {
+ this.result *= num.result;
+ } else if (typeof num === 'number') {
+ this.result *= num;
+ }
+ return this;
+ }
+
+ div(num: number | string | AbstractCalculator): this {
+ if (num instanceof NumCalculator) {
+ this.result /= num.result;
+ } else if (typeof num === 'number') {
+ this.result /= num;
+ }
+ return this;
+ }
+
+ equal(): number {
+ return this.result;
+ }
+}
diff --git a/components/_theme/util/calc/calculator.ts b/components/_theme/util/calc/calculator.ts
new file mode 100644
index 0000000000..cfd19ab5d4
--- /dev/null
+++ b/components/_theme/util/calc/calculator.ts
@@ -0,0 +1,33 @@
+abstract class AbstractCalculator {
+ /**
+ * @descCN 计算两数的和，例如：1 + 2
+ * @descEN Calculate the sum of two numbers, e.g. 1 + 2
+ */
+ abstract add(num: number | string | AbstractCalculator): this;
+
+ /**
+ * @descCN 计算两数的差，例如：1 - 2
+ * @descEN Calculate the difference between two numbers, e.g. 1 - 2
+ */
+ abstract sub(num: number | string | AbstractCalculator): this;
+
+ /**
+ * @descCN 计算两数的积，例如：1 * 2
+ * @descEN Calculate the product of two numbers, e.g. 1 * 2
+ */
+ abstract mul(num: number | string | AbstractCalculator): this;
+
+ /**
+ * @descCN 计算两数的商，例如：1 / 2
+ * @descEN Calculate the quotient of two numbers, e.g. 1 / 2
+ */
+ abstract div(num: number | string | AbstractCalculator): this;
+
+ /**
+ * @descCN 获取计算结果
+ * @descEN Get the calculation result
+ */
+ abstract equal(options?: { unit?: boolean }): string | number;
+}
+
+export default AbstractCalculator;
diff --git a/components/_theme/util/calc/index.ts b/components/_theme/util/calc/index.ts
new file mode 100644
index 0000000000..1a1286d20b
--- /dev/null
+++ b/components/_theme/util/calc/index.ts
@@ -0,0 +1,11 @@
+import NumCalculator from './NumCalculator';
+import CSSCalculator from './CSSCalculator';
+import type AbstractCalculator from './calculator';
+
+const genCalc = (type: 'css' | 'js') => {
+ const Calculator = type === 'css' ? CSSCalculator : NumCalculator;
+
+ return (num: number | string | AbstractCalculator) => new Calculator(num);
+};
+
+export default genCalc;
diff --git a/components/_theme/util/genComponentStyleHook.ts b/components/_theme/util/genComponentStyleHook.ts
new file mode 100644
index 0000000000..540a6a4751
--- /dev/null
+++ b/components/_theme/util/genComponentStyleHook.ts
@@ -0,0 +1,458 @@
+/* eslint-disable no-redeclare */
+import type { CSSInterpolation, CSSObject } from '../../_util/_cssinjs';
+import { token2CSSVar, useCSSVarRegister, useStyleRegister } from '../../_util/_cssinjs';
+import warning from '../../_util/warning';
+import { genCommonStyle, genLinkStyle } from '../../style';
+import type {
+ AliasToken,
+ ComponentTokenMap,
+ GlobalToken,
+ OverrideToken,
+ UseComponentStyleResult,
+} from '../interface';
+import useToken, { ignore, unitless } from '../useToken';
+import genCalc from './calc';
+import type AbstractCalculator from './calc/calculator';
+import genMaxMin from './maxmin';
+import statisticToken, { merge as mergeToken } from './statistic';
+import useResetIconStyle from './useResetIconStyle';
+
+import type { Ref } from 'vue';
+import { defineComponent, computed, createVNode, Fragment } from 'vue';
+import { useConfigContextInject } from '../../config-provider/context';
+import type { VueNode } from 'ant-design-vue/es/_util/type';
+import { objectType } from 'ant-design-vue/es/_util/type';
+
+export type OverrideTokenWithoutDerivative = ComponentTokenMap;
+export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
+export type GlobalTokenWithComponent<C extends OverrideComponent> = GlobalToken &
+ ComponentTokenMap[C];
+
+type ComponentToken<C extends OverrideComponent> = Exclude<OverrideToken[C], undefined>;
+type ComponentTokenKey<C extends OverrideComponent> = keyof ComponentToken<C>;
+
+export interface StyleInfo {
+ hashId: string;
+ prefixCls: string;
+ rootPrefixCls: string;
+ iconPrefixCls: string;
+}
+
+export type CSSUtil = {
+ calc: (number: any) => AbstractCalculator;
+ max: (...values: (number | string)[]) => number | string;
+ min: (...values: (number | string)[]) => number | string;
+};
+
+export type TokenWithCommonCls<T> = T & {
+ /** Wrap component class with `.` prefix */
+ componentCls: string;
+ /** Origin prefix which do not have `.` prefix */
+ prefixCls: string;
+ /** Wrap icon class with `.` prefix */
+ iconCls: string;
+ /** Wrap ant prefixCls class with `.` prefix */
+ antCls: string;
+} & CSSUtil;
+
+export type FullToken<C extends OverrideComponent> = TokenWithCommonCls<
+ GlobalTokenWithComponent<C>
+>;
+
+export type GenStyleFn<C extends OverrideComponent> = (
+ token: FullToken<C>,
+ info: StyleInfo,
+) => CSSInterpolation;
+
+export type GetDefaultToken<C extends OverrideComponent> =
+ | null
+ | OverrideTokenWithoutDerivative[C]
+ | ((
+ token: AliasToken & Partial<OverrideTokenWithoutDerivative[C]>,
+ ) => OverrideTokenWithoutDerivative[C]);
+
+const getDefaultComponentToken = <C extends OverrideComponent>(
+ component: C,
+ token: Ref<GlobalToken>,
+ getDefaultToken: GetDefaultToken<C>,
+) => {
+ if (typeof getDefaultToken === 'function') {
+ return getDefaultToken(mergeToken<any>(token.value, token.value[component] ?? {}));
+ }
+ return getDefaultToken ?? {};
+};
+
+const getComponentToken = <C extends OverrideComponent>(
+ component: C,
+ token: Ref<GlobalToken>,
+ defaultToken: OverrideTokenWithoutDerivative[C],
+ options?: {
+ deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
+ },
+) => {
+ const customToken = { ...(token.value[component] as ComponentToken<C>) };
+ if (options?.deprecatedTokens) {
+ const { deprecatedTokens } = options;
+ deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
+ if (process.env.NODE_ENV !== 'production') {
+ warning(
+ !customToken?.[oldTokenKey],
+ `Component Token \`${String(
+ oldTokenKey,
+ )}\` of ${component} is deprecated. Please use \`${String(newTokenKey)}\` instead.`,
+ );
+ }
+
+ // Should wrap with `if` clause, or there will be `undefined` in object.
+ if (customToken?.[oldTokenKey] || customToken?.[newTokenKey]) {
+ customToken[newTokenKey] ??= customToken?.[oldTokenKey];
+ }
+ });
+ }
+ const mergedToken: any = { ...defaultToken, ...customToken };
+
+ // Remove same value as global token to minimize size
+ Object.keys(mergedToken).forEach(key => {
+ if (mergedToken[key] === token[key as keyof GlobalToken]) {
+ delete mergedToken[key];
+ }
+ });
+
+ return mergedToken;
+};
+
+const getCompVarPrefix = (component: string, prefix?: string) =>
+ `${[
+ prefix,
+ component.replace(/([A-Z]+)([A-Z][a-z]+)/g, '$1-$2').replace(/([a-z])([A-Z])/g, '$1-$2'),
+ ]
+ .filter(Boolean)
+ .join('-')}`;
+
+export default function genComponentStyleHook<C extends OverrideComponent>(
+ componentName: C | [C, string],
+ styleFn: GenStyleFn<C>,
+ getDefaultToken?: GetDefaultToken<C>,
+ options: {
+ resetStyle?: boolean;
+ // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
+ deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
+ /**
+ * Only use component style in client side. Ignore in SSR.
+ */
+ clientOnly?: boolean;
+ /**
+ * Set order of component style. Default is -999.
+ */
+ order?: number;
+ injectStyle?: boolean;
+ } = {},
+) {
+ const cells = (Array.isArray(componentName) ? componentName : [componentName, componentName]) as [
+ C,
+ string,
+ ];
+
+ const [component] = cells;
+ const concatComponent = cells.join('-');
+
+ return (_prefixCls?: Ref<string>): UseComponentStyleResult => {
+ const prefixCls = computed(() => _prefixCls?.value);
+ const [theme, realToken, hashId, token, cssVar] = useToken();
+ const { getPrefixCls, iconPrefixCls, csp } = useConfigContextInject();
+
+ const rootPrefixCls = computed(() => getPrefixCls());
+
+ const type = computed(() => (cssVar.value ? 'css' : 'js'));
+ const calc = computed(() => genCalc(type.value));
+ const maxMin = computed(() => genMaxMin(type.value));
+
+ // Shared config
+ // const sharedConfig: Omit<Parameters<typeof useStyleRegister>[0], 'path'> = {
+ // theme: theme.value,
+ // token: token.value,
+ // hashId: hashId.value,
+ // nonce: () => csp.value?.nonce!,
+ // clientOnly: options.clientOnly,
+
+ // // antd is always at top of styles
+ // order: options.order || -999,
+ // };
+
+ const sharedConfig = computed(() => {
+ return {
+ theme: theme.value,
+ token: token.value,
+ hashId: hashId.value,
+ nonce: () => csp.value && csp.value.nonce,
+ clientOnly: options.clientOnly,
+
+ // antd is always at top of styles
+ order: options.order || -999,
+ };
+ });
+
+ // Generate style for all a tags in antd component.
+ useStyleRegister(
+ computed(() => ({
+ ...sharedConfig.value,
+ clientOnly: false,
+ path: ['Shared', rootPrefixCls.value],
+ })),
+ () =>
+ [
+ {
+ // Link
+ '&': genLinkStyle(token.value),
+ },
+ ] as CSSObject[],
+ );
+
+ // Generate style for icons
+ useResetIconStyle(iconPrefixCls, csp);
+
+ const wrapSSR = useStyleRegister(
+ computed(() => ({
+ ...sharedConfig.value,
+ path: [concatComponent, prefixCls.value, iconPrefixCls.value],
+ })),
+ () => {
+ if (options.injectStyle === false) {
+ return [];
+ }
+
+ const { token: proxyToken, flush } = statisticToken(token.value);
+
+ const defaultComponentToken = getDefaultComponentToken(
+ component,
+ realToken,
+ getDefaultToken,
+ );
+
+ const componentCls = `.${prefixCls.value}`;
+ const componentToken = getComponentToken(component, realToken, defaultComponentToken, {
+ deprecatedTokens: options.deprecatedTokens,
+ });
+
+ if (cssVar.value) {
+ Object.keys(defaultComponentToken).forEach(key => {
+ defaultComponentToken[key] = `var(${token2CSSVar(
+ key,
+ getCompVarPrefix(component, cssVar.value?.prefix),
+ )})`;
+ });
+ }
+ const mergedToken = mergeToken<
+ TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
+ >(
+ proxyToken,
+ {
+ componentCls,
+ prefixCls: prefixCls.value,
+ iconCls: `.${iconPrefixCls.value}`,
+ antCls: `.${rootPrefixCls.value}`,
+ calc: calc.value,
+ max: maxMin.value.max,
+ min: maxMin.value.min,
+ },
+ cssVar.value ? defaultComponentToken : componentToken,
+ );
+
+ const styleInterpolation = styleFn(mergedToken as unknown as FullToken<C>, {
+ hashId: hashId.value,
+ prefixCls: prefixCls.value,
+ rootPrefixCls: rootPrefixCls.value,
+ iconPrefixCls: iconPrefixCls.value,
+ });
+ flush(component, componentToken);
+ return [
+ options.resetStyle === false ? null : genCommonStyle(mergedToken, prefixCls.value),
+ styleInterpolation,
+ ] as CSSObject[];
+ },
+ );
+
+ return [wrapSSR, hashId];
+ };
+}
+
+export interface SubStyleComponentProps {
+ prefixCls: Ref<string>;
+}
+
+// Get from second argument
+type RestParameters<T extends any[]> = T extends [any, ...infer Rest] ? Rest : never;
+
+export const genSubStyleComponent: <C extends OverrideComponent>(
+ componentName: [C, string],
+ ...args: RestParameters<Parameters<typeof genComponentStyleHook<C>>>
+) => any = (componentName, styleFn, getDefaultToken, options) => {
+ const useStyle = genComponentStyleHook(componentName, styleFn, getDefaultToken, {
+ resetStyle: false,
+
+ // Sub Style should default after root one
+ order: -998,
+ ...options,
+ });
+
+ const StyledComponent = defineComponent({
+ props: {
+ prefixCls: String,
+ },
+ setup(props) {
+ const prefixCls = computed(() => props.prefixCls);
+ useStyle(prefixCls);
+ return () => {
+ return null;
+ };
+ },
+ });
+
+ return StyledComponent;
+};
+
+export type CSSVarRegisterProps = {
+ rootCls: string;
+ component: string;
+ cssVar: {
+ prefix?: string;
+ key?: string;
+ };
+};
+
+const genCSSVarRegister = <C extends OverrideComponent>(
+ component: C,
+ getDefaultToken?: GetDefaultToken<C>,
+ options?: {
+ unitless?: {
+ [key in ComponentTokenKey<C>]: boolean;
+ };
+ deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
+
+ injectStyle?: boolean;
+ },
+) => {
+ function prefixToken(key: string) {
+ return `${component}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`;
+ }
+
+ const { unitless: originUnitless = {}, injectStyle = true } = options ?? {};
+ const compUnitless: any = {
+ [prefixToken('zIndexPopup')]: true,
+ };
+ Object.keys(originUnitless).forEach((key: keyof ComponentTokenKey<C>) => {
+ compUnitless[prefixToken(key)] = originUnitless[key];
+ });
+
+ const CSSVarRegister = defineComponent({
+ props: {
+ rootCls: String,
+ component: String,
+ cssVar: objectType<{
+ prefix: string;
+ key: string;
+ }>(),
+ },
+ setup(props) {
+ const [, realToken] = useToken();
+
+ useCSSVarRegister(
+ computed(() => {
+ return {
+ path: [props.component],
+ prefix: props.cssVar.prefix,
+ key: props.cssVar.key!,
+ unitless: {
+ ...unitless,
+ ...compUnitless,
+ },
+ ignore,
+ token: realToken.value,
+ scope: props.rootCls,
+ };
+ }),
+ () => {
+ const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken);
+ const componentToken = getComponentToken(component, realToken, defaultToken, {
+ deprecatedTokens: options?.deprecatedTokens,
+ });
+ Object.keys(defaultToken).forEach(key => {
+ componentToken[prefixToken(key)] = componentToken[key];
+ delete componentToken[key];
+ });
+ return componentToken;
+ },
+ );
+
+ return () => {
+ return null;
+ };
+ },
+ });
+
+ const useCSSVar = (rootCls: Ref<string>) => {
+ const [, , , , cssVar] = useToken();
+
+ return [
+ (node: VueNode): VueNode =>
+ injectStyle && cssVar.value
+ ? createVNode(Fragment, null, [
+ createVNode(CSSVarRegister, {
+ rootCls: rootCls.value,
+ cssVar: cssVar.value,
+ component,
+ }),
+ node,
+ ])
+ : node,
+ computed(() => cssVar.value?.key),
+ ] as const;
+ };
+
+ return useCSSVar;
+};
+
+export const genStyleHooks = <C extends OverrideComponent>(
+ component: C | [C, string],
+ styleFn: GenStyleFn<C>,
+ getDefaultToken?: GetDefaultToken<C>,
+ options?: {
+ resetStyle?: boolean;
+ deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
+ /**
+ * Component tokens that do not need unit.
+ */
+ unitless?: {
+ [key in ComponentTokenKey<C>]: boolean;
+ };
+ /**
+ * Only use component style in client side. Ignore in SSR.
+ */
+ clientOnly?: boolean;
+ /**
+ * Set order of component style.
+ * @default -999
+ */
+ order?: number;
+ /**
+ * Whether generate styles
+ * @default true
+ */
+ injectStyle?: boolean;
+ },
+) => {
+ const useStyle = genComponentStyleHook(component, styleFn, getDefaultToken, options);
+
+ const useCSSVar = genCSSVarRegister(
+ Array.isArray(component) ? component[0] : component,
+ getDefaultToken,
+ options,
+ );
+
+ return (prefixCls: Ref<string>, rootCls: Ref<string> = prefixCls) => {
+ const [, hashId] = useStyle(prefixCls);
+ const [wrapCSSVar, cssVarCls] = useCSSVar(rootCls);
+
+ return [wrapCSSVar, hashId, cssVarCls] as const;
+ };
+};
diff --git a/components/_theme/util/genPresetColor.ts b/components/_theme/util/genPresetColor.ts
new file mode 100644
index 0000000000..b5383f73c0
--- /dev/null
+++ b/components/_theme/util/genPresetColor.ts
@@ -0,0 +1,35 @@
+/* eslint-disable import/prefer-default-export */
+import type { CSSObject } from '../../_util/_cssinjs';
+import type { AliasToken, PresetColorKey } from '../internal';
+import { PresetColors } from '../interface';
+import type { TokenWithCommonCls } from './genComponentStyleHook';
+
+interface CalcColor {
+ /** token[`${colorKey}-1`] */
+ lightColor: string;
+ /** token[`${colorKey}-3`] */
+ lightBorderColor: string;
+ /** token[`${colorKey}-6`] */
+ darkColor: string;
+ /** token[`${colorKey}-7`] */
+ textColor: string;
+}
+
+type GenCSS = (colorKey: PresetColorKey, calcColor: CalcColor) => CSSObject;
+
+export default function genPresetColor<Token extends TokenWithCommonCls<AliasToken>>(
+ token: Token,
+ genCss: GenCSS,
+): CSSObject {
+ return PresetColors.reduce((prev: CSSObject, colorKey: PresetColorKey) => {
+ const lightColor = token[`${colorKey}1`];
+ const lightBorderColor = token[`${colorKey}3`];
+ const darkColor = token[`${colorKey}6`];
+ const textColor = token[`${colorKey}7`];
+
+ return {
+ ...prev,
+ ...genCss(colorKey, { lightColor, lightBorderColor, darkColor, textColor }),
+ };
+ }, {} as CSSObject);
+}
diff --git a/components/_theme/util/getAlphaColor.ts b/components/_theme/util/getAlphaColor.ts
new file mode 100644
index 0000000000..7cd1d3fdbb
--- /dev/null
+++ b/components/_theme/util/getAlphaColor.ts
@@ -0,0 +1,29 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+function isStableColor(color: number): boolean {
+ return color >= 0 && color <= 255;
+}
+
+function getAlphaColor(frontColor: string, backgroundColor: string): string {
+ const { r: fR, g: fG, b: fB, a: originAlpha } = new TinyColor(frontColor).toRgb();
+ if (originAlpha < 1) {
+ return frontColor;
+ }
+
+ const { r: bR, g: bG, b: bB } = new TinyColor(backgroundColor).toRgb();
+
+ for (let fA = 0.01; fA <= 1; fA += 0.01) {
+ const r = Math.round((fR - bR * (1 - fA)) / fA);
+ const g = Math.round((fG - bG * (1 - fA)) / fA);
+ const b = Math.round((fB - bB * (1 - fA)) / fA);
+ if (isStableColor(r) && isStableColor(g) && isStableColor(b)) {
+ return new TinyColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString();
+ }
+ }
+
+ // fallback
+ /* istanbul ignore next */
+ return new TinyColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString();
+}
+
+export default getAlphaColor;
diff --git a/components/_theme/util/maxmin.ts b/components/_theme/util/maxmin.ts
new file mode 100644
index 0000000000..13d07e8ba3
--- /dev/null
+++ b/components/_theme/util/maxmin.ts
@@ -0,0 +1,14 @@
+import { unit } from '../../_util/_cssinjs';
+
+export default function genMaxMin(type: 'css' | 'js') {
+ if (type === 'js') {
+ return {
+ max: Math.max,
+ min: Math.min,
+ };
+ }
+ return {
+ max: (...args: (string | number)[]) => `max(${args.map(value => unit(value)).join(',')})`,
+ min: (...args: (string | number)[]) => `min(${args.map(value => unit(value)).join(',')})`,
+ };
+}
diff --git a/components/_theme/util/statistic.ts b/components/_theme/util/statistic.ts
new file mode 100644
index 0000000000..2b29ebacd1
--- /dev/null
+++ b/components/_theme/util/statistic.ts
@@ -0,0 +1,85 @@
+import type { AnyObject } from '../../_util/type';
+
+declare const CSSINJS_STATISTIC: any;
+
+const enableStatistic =
+ process.env.NODE_ENV !== 'production' || typeof CSSINJS_STATISTIC !== 'undefined';
+let recording = true;
+
+/**
+ * This function will do as `Object.assign` in production. But will use Object.defineProperty:get to
+ * pass all value access in development. To support statistic field usage with alias token.
+ */
+export function merge<T extends AnyObject>(...objs: Partial<T>[]): T {
+ /* istanbul ignore next */
+ if (!enableStatistic) {
+ return Object.assign({}, ...objs);
+ }
+
+ recording = false;
+
+ const ret = {} as T;
+
+ objs.forEach(obj => {
+ const keys = Object.keys(obj);
+
+ keys.forEach(key => {
+ Object.defineProperty(ret, key, {
+ configurable: true,
+ enumerable: true,
+ get: () => (obj as any)[key],
+ });
+ });
+ });
+
+ recording = true;
+ return ret;
+}
+
+/** @internal Internal Usage. Not use in your production. */
+export const statistic: Record<
+ string,
+ { global: string[]; component: Record<string, string | number> }
+> = {};
+
+/** @internal Internal Usage. Not use in your production. */
+// eslint-disable-next-line camelcase
+export const _statistic_build_: typeof statistic = {};
+
+/* istanbul ignore next */
+function noop() {}
+
+/** Statistic token usage case. Should use `merge` function if you do not want spread record. */
+const statisticToken = <T extends AnyObject>(token: T) => {
+ let tokenKeys: Set<string> | undefined;
+ let proxy = token;
+ let flush: (componentName: string, componentToken: Record<string, string | number>) => void =
+ noop;
+
+ if (enableStatistic && typeof Proxy !== 'undefined') {
+ tokenKeys = new Set<string>();
+
+ proxy = new Proxy(token, {
+ get(obj: any, prop: any) {
+ if (recording) {
+ tokenKeys!.add(prop);
+ }
+ return obj[prop];
+ },
+ });
+
+ flush = (componentName, componentToken) => {
+ statistic[componentName] = {
+ global: Array.from(tokenKeys!),
+ component: {
+ ...statistic[componentName]?.component,
+ ...componentToken,
+ },
+ };
+ };
+ }
+
+ return { token: proxy, keys: tokenKeys, flush };
+};
+
+export default statisticToken;
diff --git a/components/_theme/util/useResetIconStyle.ts b/components/_theme/util/useResetIconStyle.ts
new file mode 100644
index 0000000000..6ff3c698a1
--- /dev/null
+++ b/components/_theme/util/useResetIconStyle.ts
@@ -0,0 +1,35 @@
+import type { CSSObject } from '../../_util/_cssinjs';
+import { useStyleRegister } from '../../_util/_cssinjs';
+import { resetIcon } from '../../style';
+import type { CSPConfig } from '../../config-provider';
+import useToken from '../useToken';
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+const useResetIconStyle = (iconPrefixCls: Ref<string>, csp?: Ref<CSPConfig>) => {
+ const [theme, token] = useToken();
+
+ // Generate style for icons
+ return useStyleRegister(
+ computed(() => ({
+ theme: theme.value,
+ token,
+ hashId: '',
+ path: ['ant-design-icons', iconPrefixCls.value],
+ nonce: () => csp.value && csp.value.nonce,
+ })),
+ () =>
+ [
+ {
+ [`.${iconPrefixCls}`]: {
+ ...resetIcon(),
+ [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
+ display: 'block',
+ },
+ },
+ },
+ ] as CSSObject[],
+ );
+};
+
+export default useResetIconStyle;
diff --git a/components/_util/_cssinjs/Cache.ts b/components/_util/_cssinjs/Cache.ts
new file mode 100644
index 0000000000..cff14b4752
--- /dev/null
+++ b/components/_util/_cssinjs/Cache.ts
@@ -0,0 +1,32 @@
+export type KeyType = string | number;
+type ValueType = [number, any]; // [times, realValue]
+
+const SPLIT = '%';
+
+class Entity {
+ instanceId: string;
+ constructor(instanceId: string) {
+ this.instanceId = instanceId;
+ }
+
+ /** @private Internal cache map. Do not access this directly */
+ cache = new Map<string, ValueType>();
+
+ get(keys: KeyType[] | string): ValueType | null {
+ return this.cache.get(Array.isArray(keys) ? keys.join(SPLIT) : keys) || null;
+ }
+
+ update(keys: KeyType[] | string, valueFn: (origin: ValueType | null) => ValueType | null) {
+ const path = Array.isArray(keys) ? keys.join(SPLIT) : keys;
+ const prevValue = this.cache.get(path)!;
+ const nextValue = valueFn(prevValue);
+
+ if (nextValue === null) {
+ this.cache.delete(path);
+ } else {
+ this.cache.set(path, nextValue);
+ }
+ }
+}
+
+export default Entity;
diff --git a/components/_util/_cssinjs/Keyframes.ts b/components/_util/_cssinjs/Keyframes.ts
new file mode 100644
index 0000000000..64b99e27c3
--- /dev/null
+++ b/components/_util/_cssinjs/Keyframes.ts
@@ -0,0 +1,19 @@
+import type { CSSInterpolation } from './hooks/useStyleRegister';
+
+class Keyframe {
+ private name: string;
+ style: CSSInterpolation;
+
+ constructor(name: string, style: CSSInterpolation) {
+ this.name = name;
+ this.style = style;
+ }
+
+ getName(hashId = ''): string {
+ return hashId ? `${hashId}-${this.name}` : this.name;
+ }
+
+ _keyframe = true;
+}
+
+export default Keyframe;
diff --git a/components/_util/_cssinjs/StyleContext.tsx b/components/_util/_cssinjs/StyleContext.tsx
new file mode 100644
index 0000000000..6d062eece2
--- /dev/null
+++ b/components/_util/_cssinjs/StyleContext.tsx
@@ -0,0 +1,194 @@
+import type { ShallowRef, ExtractPropTypes, InjectionKey, Ref } from 'vue';
+import {
+ provide,
+ defineComponent,
+ unref,
+ inject,
+ watch,
+ shallowRef,
+ getCurrentInstance,
+} from 'vue';
+import CacheEntity from './Cache';
+import type { Linter } from './linters/interface';
+import type { Transformer } from './transformers/interface';
+import { arrayType, booleanType, objectType, someType, stringType, withInstall } from '../type';
+export const ATTR_TOKEN = 'data-token-hash';
+export const ATTR_MARK = 'data-css-hash';
+export const ATTR_CACHE_PATH = 'data-cache-path';
+
+// Mark css-in-js instance in style element
+export const CSS_IN_JS_INSTANCE = '__cssinjs_instance__';
+
+export function createCache() {
+ const cssinjsInstanceId = Math.random().toString(12).slice(2);
+
+ // Tricky SSR: Move all inline style to the head.
+ // PS: We do not recommend tricky mode.
+ if (typeof document !== 'undefined' && document.head && document.body) {
+ const styles = document.body.querySelectorAll(`style[${ATTR_MARK}]`) || [];
+ const { firstChild } = document.head;
+
+ Array.from(styles).forEach(style => {
+ (style as any)[CSS_IN_JS_INSTANCE] = (style as any)[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
+
+ // Not force move if no head
+ if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
+ document.head.insertBefore(style, firstChild);
+ }
+ });
+
+ // Deduplicate of moved styles
+ const styleHash: Record<string, boolean> = {};
+ Array.from(document.querySelectorAll(`style[${ATTR_MARK}]`)).forEach(style => {
+ const hash = style.getAttribute(ATTR_MARK)!;
+ if (styleHash[hash]) {
+ if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
+ style.parentNode?.removeChild(style);
+ }
+ } else {
+ styleHash[hash] = true;
+ }
+ });
+ }
+
+ return new CacheEntity(cssinjsInstanceId);
+}
+
+export type HashPriority = 'low' | 'high';
+
+export interface StyleContextProps {
+ autoClear?: boolean;
+ /** @private Test only. Not work in production. */
+ mock?: 'server' | 'client';
+ /**
+ * Only set when you need ssr to extract style on you own.
+ * If not provided, it will auto create <style /> on the end of Provider in server side.
+ */
+ cache: CacheEntity;
+ /** Tell children that this context is default generated context */
+ defaultCache: boolean;
+ /** Use `:where` selector to reduce hashId css selector priority */
+ hashPriority?: HashPriority;
+ /** Tell cssinjs where to inject style in */
+ container?: Element | ShadowRoot;
+ /** Component wil render inline `<style />` for fallback in SSR. Not recommend. */
+ ssrInline?: boolean;
+ /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
+ transformers?: Transformer[];
+ /**
+ * Linters to lint css before inject in document.
+ * Styles will be linted after transforming.
+ * Please note that `linters` do not support dynamic update.
+ */
+ linters?: Linter[];
+}
+
+const StyleContextKey: InjectionKey<ShallowRef<Partial<StyleContextProps>>> =
+ Symbol('StyleContextKey');
+
+export type UseStyleProviderProps = Partial<StyleContextProps> | Ref<Partial<StyleContextProps>>;
+
+// fix: https://github.com/vueComponent/ant-design-vue/issues/7023
+const getCache = () => {
+ const instance = getCurrentInstance();
+ let cache: CacheEntity;
+ if (instance && instance.appContext) {
+ const globalCache = instance.appContext?.config?.globalProperties?.__ANTDV_CSSINJS_CACHE__;
+ if (globalCache) {
+ cache = globalCache;
+ } else {
+ cache = createCache();
+ if (instance.appContext.config.globalProperties) {
+ instance.appContext.config.globalProperties.__ANTDV_CSSINJS_CACHE__ = cache;
+ }
+ }
+ } else {
+ cache = createCache();
+ }
+ return cache;
+};
+
+const defaultStyleContext: StyleContextProps = {
+ cache: createCache(),
+ defaultCache: true,
+ hashPriority: 'low',
+};
+// fix: https://github.com/vueComponent/ant-design-vue/issues/6912
+export const useStyleInject = () => {
+ const cache = getCache();
+ return inject(StyleContextKey, shallowRef({ ...defaultStyleContext, cache }));
+};
+export const useStyleProvider = (props: UseStyleProviderProps) => {
+ const parentContext = useStyleInject();
+ const context = shallowRef<Partial<StyleContextProps>>({
+ ...defaultStyleContext,
+ cache: createCache(),
+ });
+ watch(
+ [() => unref(props), parentContext],
+ () => {
+ const mergedContext: Partial<StyleContextProps> = {
+ ...parentContext.value,
+ };
+ const propsValue = unref(props);
+ Object.keys(propsValue).forEach(key => {
+ const value = propsValue[key];
+ if (propsValue[key] !== undefined) {
+ mergedContext[key] = value;
+ }
+ });
+
+ const { cache } = propsValue;
+ mergedContext.cache = mergedContext.cache || createCache();
+ mergedContext.defaultCache = !cache && parentContext.value.defaultCache;
+ context.value = mergedContext;
+ },
+ { immediate: true },
+ );
+ provide(StyleContextKey, context);
+ return context;
+};
+export const styleProviderProps = () => ({
+ autoClear: booleanType(),
+ /** @private Test only. Not work in production. */
+ mock: stringType<'server' | 'client'>(),
+ /**
+ * Only set when you need ssr to extract style on you own.
+ * If not provided, it will auto create <style /> on the end of Provider in server side.
+ */
+ cache: objectType<CacheEntity>(),
+ /** Tell children that this context is default generated context */
+ defaultCache: booleanType(),
+ /** Use `:where` selector to reduce hashId css selector priority */
+ hashPriority: stringType<HashPriority>(),
+ /** Tell cssinjs where to inject style in */
+ container: someType<Element | ShadowRoot>(),
+ /** Component wil render inline `<style />` for fallback in SSR. Not recommend. */
+ ssrInline: booleanType(),
+ /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
+ transformers: arrayType<Transformer[]>(),
+ /**
+ * Linters to lint css before inject in document.
+ * Styles will be linted after transforming.
+ * Please note that `linters` do not support dynamic update.
+ */
+ linters: arrayType<Linter[]>(),
+});
+export type StyleProviderProps = Partial<ExtractPropTypes<ReturnType<typeof styleProviderProps>>>;
+export const StyleProvider = withInstall(
+ defineComponent({
+ name: 'AStyleProvider',
+ inheritAttrs: false,
+ props: styleProviderProps(),
+ setup(props, { slots }) {
+ useStyleProvider(props);
+ return () => slots.default?.();
+ },
+ }),
+);
+
+export default {
+ useStyleInject,
+ useStyleProvider,
+ StyleProvider,
+};
diff --git a/components/_util/_cssinjs/extractStyle.ts b/components/_util/_cssinjs/extractStyle.ts
new file mode 100644
index 0000000000..3fa3411cd9
--- /dev/null
+++ b/components/_util/_cssinjs/extractStyle.ts
@@ -0,0 +1,82 @@
+import type Cache from './Cache';
+import { extract as tokenExtractStyle, TOKEN_PREFIX } from './hooks/useCacheToken';
+import { CSS_VAR_PREFIX, extract as cssVarExtractStyle } from './hooks/useCSSVarRegister';
+import { extract as styleExtractStyle, STYLE_PREFIX } from './hooks/useStyleRegister';
+import { toStyleStr } from './util';
+import { ATTR_CACHE_MAP, serialize as serializeCacheMap } from './util/cacheMapUtil';
+
+const ExtractStyleFns = {
+ [STYLE_PREFIX]: styleExtractStyle,
+ [TOKEN_PREFIX]: tokenExtractStyle,
+ [CSS_VAR_PREFIX]: cssVarExtractStyle,
+};
+
+type ExtractStyleType = keyof typeof ExtractStyleFns;
+
+function isNotNull<T>(value: T | null): value is T {
+ return value !== null;
+}
+
+export default function extractStyle(
+ cache: Cache,
+ options?:
+ | boolean
+ | {
+ plain?: boolean;
+ types?: ExtractStyleType | ExtractStyleType[];
+ },
+) {
+ const { plain = false, types = ['style', 'token', 'cssVar'] } =
+ typeof options === 'boolean' ? { plain: options } : options || {};
+
+ const matchPrefixRegexp = new RegExp(
+ `^(${(typeof types === 'string' ? [types] : types).join('|')})%`,
+ );
+
+ // prefix with `style` is used for `useStyleRegister` to cache style context
+ const styleKeys = Array.from(cache.cache.keys()).filter(key => matchPrefixRegexp.test(key));
+
+ // Common effect styles like animation
+ const effectStyles: Record<string, boolean> = {};
+
+ // Mapping of cachePath to style hash
+ const cachePathMap: Record<string, string> = {};
+
+ let styleText = '';
+
+ styleKeys
+ .map<[number, string] | null>(key => {
+ const cachePath = key.replace(matchPrefixRegexp, '').replace(/%/g, '|');
+ const [prefix] = key.split('%');
+ const extractFn = ExtractStyleFns[prefix as keyof typeof ExtractStyleFns];
+ const extractedStyle = extractFn(cache.cache.get(key)![1], effectStyles, {
+ plain,
+ });
+ if (!extractedStyle) {
+ return null;
+ }
+ const [order, styleId, styleStr] = extractedStyle;
+ if (key.startsWith('style')) {
+ cachePathMap[cachePath] = styleId;
+ }
+ return [order, styleStr];
+ })
+ .filter(isNotNull)
+ .sort(([o1], [o2]) => o1 - o2)
+ .forEach(([, style]) => {
+ styleText += style;
+ });
+
+ // ==================== Fill Cache Path ====================
+ styleText += toStyleStr(
+ `.${ATTR_CACHE_MAP}{content:"${serializeCacheMap(cachePathMap)}";}`,
+ undefined,
+ undefined,
+ {
+ [ATTR_CACHE_MAP]: ATTR_CACHE_MAP,
+ },
+ plain,
+ );
+
+ return styleText;
+}
diff --git a/components/_util/_cssinjs/hooks/useCSSVarRegister.ts b/components/_util/_cssinjs/hooks/useCSSVarRegister.ts
new file mode 100644
index 0000000000..3fbe01b9aa
--- /dev/null
+++ b/components/_util/_cssinjs/hooks/useCSSVarRegister.ts
@@ -0,0 +1,153 @@
+import { updateCSS } from '../../../vc-util/Dom/dynamicCSS';
+import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
+import { isClientSide, token2key, toStyleStr } from '../util';
+import type { TokenWithCSSVar } from '../util/css-variables';
+import { transformToken } from '../util/css-variables';
+import type { ExtractStyle } from './useGlobalCache';
+import useGlobalCache from './useGlobalCache';
+import { uniqueHash } from './useStyleRegister';
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+export const CSS_VAR_PREFIX = 'cssVar';
+
+type CSSVarCacheValue<V, T extends Record<string, V> = Record<string, V>> = [
+ cssVarToken: TokenWithCSSVar<V, T>,
+ cssVarStr: string,
+ tokenKey: string,
+ styleId: string,
+ cssVarKey: string,
+];
+
+const tokenKeys = new Map<string, number>();
+function recordCleanToken(tokenKey: string) {
+ tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1);
+}
+
+function removeStyleTags(key: string, instanceId: string) {
+ if (typeof document !== 'undefined') {
+ const styles = document.querySelectorAll(`style[${ATTR_MARK}="${key}"]`);
+
+ styles.forEach(style => {
+ if ((style as any)[CSS_IN_JS_INSTANCE] === instanceId) {
+ style.parentNode?.removeChild(style);
+ }
+ });
+ }
+}
+
+const TOKEN_THRESHOLD = 0;
+
+// Remove will check current keys first
+function cleanTokenStyle(tokenKey: string, instanceId: string) {
+ tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1);
+
+ const tokenKeyList = Array.from(tokenKeys.keys());
+ const cleanableKeyList = tokenKeyList.filter(key => {
+ const count = tokenKeys.get(key) || 0;
+
+ return count <= 0;
+ });
+
+ // Should keep tokens under threshold for not to insert style too often
+ if (tokenKeyList.length - cleanableKeyList.length > TOKEN_THRESHOLD) {
+ cleanableKeyList.forEach(key => {
+ removeStyleTags(key, instanceId);
+ tokenKeys.delete(key);
+ });
+ }
+}
+
+const useCSSVarRegister = <V, T extends Record<string, V>>(
+ config: ComputedRef<{
+ path: string[];
+ key: string;
+ prefix?: string;
+ unitless?: Record<string, boolean>;
+ ignore?: Record<string, boolean>;
+ scope?: string;
+ token: any;
+ }>,
+ fn: () => T,
+) => {
+ const styleContext = useStyleInject();
+
+ const stylePath = computed(() => {
+ return [
+ ...config.value.path,
+ config.value.key,
+ config.value.scope || '',
+ config.value.token?._tokenKey,
+ ];
+ });
+
+ const cache = useGlobalCache<CSSVarCacheValue<V, T>>(
+ CSS_VAR_PREFIX,
+ stylePath,
+ () => {
+ const originToken = fn();
+ const [mergedToken, cssVarsStr] = transformToken<V, T>(originToken, config.value.key, {
+ prefix: config.value.prefix,
+ unitless: config.value.unitless,
+ ignore: config.value.ignore,
+ scope: config.value.scope || '',
+ });
+
+ const tokenKey = token2key(mergedToken, '');
+
+ const styleId = uniqueHash(stylePath.value, cssVarsStr);
+
+ recordCleanToken(tokenKey);
+ return [mergedToken, cssVarsStr, tokenKey, styleId, config.value.key];
+ },
+ ([, , tokenKey]) => {
+ if (isClientSide) {
+ // Remove token will remove all related style
+ cleanTokenStyle(tokenKey, styleContext.value?.cache?.instanceId);
+ }
+ },
+ ([, cssVarsStr, tokenKey]) => {
+ if (!cssVarsStr) {
+ return;
+ }
+
+ const style = updateCSS(cssVarsStr, tokenKey, {
+ mark: ATTR_MARK,
+ prepend: 'queue',
+ attachTo: styleContext.value.container,
+ priority: -999,
+ });
+
+ (style as any)[CSS_IN_JS_INSTANCE] = styleContext.value.cache?.instanceId;
+
+ // Used for `useCacheToken` to remove on batch when token removed
+ style.setAttribute(ATTR_TOKEN, config.value.key);
+ },
+ );
+
+ return cache;
+};
+
+export const extract: ExtractStyle<CSSVarCacheValue<any>> = (cache, _effectStyles, options) => {
+ const [, styleStr, styleId, cssVarKey] = cache;
+ const { plain } = options || {};
+
+ if (!styleStr) {
+ return null;
+ }
+
+ const order = -999;
+
+ // ====================== Style ======================
+ // Used for rc-util
+ const sharedAttrs = {
+ 'data-vc-order': 'prependQueue',
+ 'data-vc-priority': `${order}`,
+ };
+
+ const styleText = toStyleStr(styleStr, cssVarKey, styleId, sharedAttrs, plain);
+
+ return [order, styleId, styleText];
+};
+
+export default useCSSVarRegister;
diff --git a/components/_util/_cssinjs/hooks/useCacheToken.tsx b/components/_util/_cssinjs/hooks/useCacheToken.tsx
new file mode 100644
index 0000000000..6067cdd62a
--- /dev/null
+++ b/components/_util/_cssinjs/hooks/useCacheToken.tsx
@@ -0,0 +1,254 @@
+import hash from '@emotion/hash';
+import { updateCSS } from '../../../vc-util/Dom/dynamicCSS';
+import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
+import type Theme from '../theme/Theme';
+import { flattenToken, memoResult, token2key, toStyleStr } from '../util';
+import { transformToken } from '../util/css-variables';
+import type { ExtractStyle } from './useGlobalCache';
+import useGlobalCache from './useGlobalCache';
+import type { Ref } from 'vue';
+import { ref, computed } from 'vue';
+
+const EMPTY_OVERRIDE = {};
+
+// Generate different prefix to make user selector break in production env.
+// This helps developer not to do style override directly on the hash id.
+const hashPrefix = process.env.NODE_ENV !== 'production' ? 'css-dev-only-do-not-override' : 'css';
+
+export interface Option<DerivativeToken, DesignToken> {
+ /**
+ * Generate token with salt.
+ * This is used to generate different hashId even same derivative token for different version.
+ */
+ salt?: string;
+ override?: object;
+ /**
+ * Format token as you need. Such as:
+ *
+ * - rename token
+ * - merge token
+ * - delete token
+ *
+ * This should always be the same since it's one time process.
+ * It's ok to useMemo outside but this has better cache strategy.
+ */
+ formatToken?: (mergedToken: any) => DerivativeToken;
+ /**
+ * Get final token with origin token, override token and theme.
+ * The parameters do not contain formatToken since it's passed by user.
+ * @param origin The original token.
+ * @param override Extra tokens to override.
+ * @param theme Theme instance. Could get derivative token by `theme.getDerivativeToken`
+ */
+ getComputedToken?: (
+ origin: DesignToken,
+ override: object,
+ theme: Theme<any, any>,
+ ) => DerivativeToken;
+
+ /**
+ * Transform token to css variables.
+ */
+ cssVar?: {
+ /** Prefix for css variables */
+ prefix?: string;
+ /** Tokens that should not be appended with unit */
+ unitless?: Record<string, boolean>;
+ /** Tokens that should not be transformed to css variables */
+ ignore?: Record<string, boolean>;
+ /** Tokens that preserves origin value */
+ preserve?: Record<string, boolean>;
+ /** Key for current theme. Useful for customizing and should be unique */
+ key?: string;
+ };
+}
+
+const tokenKeys = new Map<string, number>();
+function recordCleanToken(tokenKey: string) {
+ tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1);
+}
+
+function removeStyleTags(key: string, instanceId: string) {
+ if (typeof document !== 'undefined') {
+ const styles = document.querySelectorAll(`style[${ATTR_TOKEN}="${key}"]`);
+
+ styles.forEach(style => {
+ if ((style as any)[CSS_IN_JS_INSTANCE] === instanceId) {
+ style.parentNode?.removeChild(style);
+ }
+ });
+ }
+}
+
+const TOKEN_THRESHOLD = 0;
+
+// Remove will check current keys first
+function cleanTokenStyle(tokenKey: string, instanceId: string) {
+ tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1);
+
+ const tokenKeyList = Array.from(tokenKeys.keys());
+ const cleanableKeyList = tokenKeyList.filter(key => {
+ const count = tokenKeys.get(key) || 0;
+
+ return count <= 0;
+ });
+
+ // Should keep tokens under threshold for not to insert style too often
+ if (tokenKeyList.length - cleanableKeyList.length > TOKEN_THRESHOLD) {
+ cleanableKeyList.forEach(key => {
+ removeStyleTags(key, instanceId);
+ tokenKeys.delete(key);
+ });
+ }
+}
+
+export const getComputedToken = <DerivativeToken = object, DesignToken = DerivativeToken>(
+ originToken: DesignToken,
+ overrideToken: object,
+ theme: Theme<any, any>,
+ format?: (token: DesignToken) => DerivativeToken,
+) => {
+ const derivativeToken = theme.getDerivativeToken(originToken);
+
+ // Merge with override
+ let mergedDerivativeToken = {
+ ...derivativeToken,
+ ...overrideToken,
+ };
+
+ // Format if needed
+ if (format) {
+ mergedDerivativeToken = format(mergedDerivativeToken);
+ }
+
+ return mergedDerivativeToken;
+};
+
+export const TOKEN_PREFIX = 'token';
+
+type TokenCacheValue<DerivativeToken> = [
+ token: DerivativeToken & { _tokenKey: string; _themeKey: string },
+ hashId: string,
+ realToken: DerivativeToken & { _tokenKey: string },
+ cssVarStr: string,
+ cssVarKey: string,
+];
+
+/**
+ * Cache theme derivative token as global shared one
+ * @param theme Theme entity
+ * @param tokens List of tokens, used for cache. Please do not dynamic generate object directly
+ * @param option Additional config
+ * @returns Call Theme.getDerivativeToken(tokenObject) to get token
+ */
+export default function useCacheToken<DerivativeToken = object, DesignToken = DerivativeToken>(
+ theme: Ref<Theme<any, any>>,
+ tokens: Ref<Partial<DesignToken>[]>,
+ option: Ref<Option<DerivativeToken, DesignToken>> = ref({}),
+): Ref<TokenCacheValue<DerivativeToken>> {
+ const styleContext = useStyleInject();
+
+ // Basic - We do basic cache here
+ const mergedToken = computed(() =>
+ memoResult(() => Object.assign({}, ...tokens.value), tokens.value),
+ );
+
+ const tokenStr = computed(() => flattenToken(mergedToken.value));
+ const overrideTokenStr = computed(() => flattenToken(option.value.override ?? EMPTY_OVERRIDE));
+
+ const cssVarStr = computed(() => (option.value.cssVar ? flattenToken(option.value.cssVar) : ''));
+
+ const cachedToken = useGlobalCache<TokenCacheValue<DerivativeToken>>(
+ TOKEN_PREFIX,
+ computed(() => [
+ option.value.salt ?? '',
+ theme.value?.id,
+ tokenStr.value,
+ overrideTokenStr.value,
+ cssVarStr.value,
+ ]),
+ () => {
+ const {
+ salt = '',
+ override = EMPTY_OVERRIDE,
+ formatToken,
+ getComputedToken: compute,
+ cssVar,
+ } = option.value;
+ let mergedDerivativeToken = compute
+ ? compute(mergedToken.value, override, theme.value)
+ : getComputedToken(mergedToken.value, override, theme.value, formatToken);
+
+ // Replace token value with css variables
+ const actualToken = { ...mergedDerivativeToken };
+ let cssVarsStr = '';
+ if (!!cssVar) {
+ [mergedDerivativeToken, cssVarsStr] = transformToken(mergedDerivativeToken, cssVar.key!, {
+ prefix: cssVar.prefix,
+ ignore: cssVar.ignore,
+ unitless: cssVar.unitless,
+ preserve: cssVar.preserve,
+ });
+ }
+
+ // Optimize for `useStyleRegister` performance
+ const tokenKey = token2key(mergedDerivativeToken, salt);
+ mergedDerivativeToken._tokenKey = tokenKey;
+ actualToken._tokenKey = token2key(actualToken, salt);
+
+ const themeKey = cssVar?.key ?? tokenKey;
+ mergedDerivativeToken._themeKey = themeKey;
+ recordCleanToken(themeKey);
+
+ const hashId = `${hashPrefix}-${hash(tokenKey)}`;
+ mergedDerivativeToken._hashId = hashId; // Not used
+
+ return [mergedDerivativeToken, hashId, actualToken, cssVarsStr, cssVar?.key || ''];
+ },
+ cache => {
+ // Remove token will remove all related style
+ cleanTokenStyle(cache[0]._themeKey, styleContext.value?.cache?.instanceId);
+ },
+ ([token, , , cssVarsStr]) => {
+ const { cssVar } = option.value;
+ if (cssVar && cssVarsStr) {
+ const style = updateCSS(cssVarsStr, hash(`css-variables-${token._themeKey}`), {
+ mark: ATTR_MARK,
+ prepend: 'queue',
+ attachTo: styleContext.value?.container,
+ priority: -999,
+ });
+
+ (style as any)[CSS_IN_JS_INSTANCE] = styleContext.value?.cache?.instanceId;
+
+ // Used for `useCacheToken` to remove on batch when token removed
+ style.setAttribute(ATTR_TOKEN, token._themeKey);
+ }
+ },
+ );
+
+ return cachedToken;
+}
+
+export const extract: ExtractStyle<TokenCacheValue<any>> = (cache, _effectStyles, options) => {
+ const [, , realToken, styleStr, cssVarKey] = cache;
+ const { plain } = options || {};
+
+ if (!styleStr) {
+ return null;
+ }
+
+ const styleId = realToken._tokenKey;
+ const order = -999;
+
+ // ====================== Style ======================
+ // Used for rc-util
+ const sharedAttrs = {
+ 'data-vc-order': 'prependQueue',
+ 'data-vc-priority': `${order}`,
+ };
+
+ const styleText = toStyleStr(styleStr, cssVarKey, styleId, sharedAttrs, plain);
+
+ return [order, styleId, styleText];
+};
diff --git a/components/_util/_cssinjs/hooks/useCompatibleInsertionEffect.tsx b/components/_util/_cssinjs/hooks/useCompatibleInsertionEffect.tsx
new file mode 100644
index 0000000000..e3ac2e794f
--- /dev/null
+++ b/components/_util/_cssinjs/hooks/useCompatibleInsertionEffect.tsx
@@ -0,0 +1,30 @@
+// import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import useLayoutEffect from '../../../_util/hooks/useLayoutEffect';
+import type { ShallowRef, WatchCallback } from 'vue';
+import { watch } from 'vue';
+
+type UseCompatibleInsertionEffect = (
+ renderEffect: WatchCallback,
+ effect: (polyfill?: boolean) => ReturnType<WatchCallback>,
+ deps: ShallowRef,
+) => void;
+
+/**
+ * Polyfill `useInsertionEffect` for React < 18
+ * @param renderEffect will be executed in `useMemo`, and do not have callback
+ * @param effect will be executed in `useLayoutEffect`
+ * @param deps
+ */
+const useInsertionEffectPolyfill: UseCompatibleInsertionEffect = (renderEffect, effect, deps) => {
+ watch(deps, renderEffect, { immediate: true });
+ useLayoutEffect(() => effect(true), deps);
+};
+
+/**
+ * Compatible `useInsertionEffect`
+ * will use `useInsertionEffect` if React version >= 18,
+ * otherwise use `useInsertionEffectPolyfill`.
+ */
+const useCompatibleInsertionEffect: UseCompatibleInsertionEffect = useInsertionEffectPolyfill;
+
+export default useCompatibleInsertionEffect;
diff --git a/components/_util/_cssinjs/hooks/useEffectCleanupRegister.ts b/components/_util/_cssinjs/hooks/useEffectCleanupRegister.ts
new file mode 100644
index 0000000000..c557e58967
--- /dev/null
+++ b/components/_util/_cssinjs/hooks/useEffectCleanupRegister.ts
@@ -0,0 +1,8 @@
+const useRun = () => {
+ return function (fn: () => void) {
+ fn();
+ };
+};
+const useEffectCleanupRegister = useRun;
+
+export default useEffectCleanupRegister;
diff --git a/components/_util/_cssinjs/hooks/useGlobalCache.tsx b/components/_util/_cssinjs/hooks/useGlobalCache.tsx
new file mode 100644
index 0000000000..1d13e584d9
--- /dev/null
+++ b/components/_util/_cssinjs/hooks/useGlobalCache.tsx
@@ -0,0 +1,111 @@
+import { useStyleInject } from '../StyleContext';
+import type { KeyType } from '../Cache';
+import useCompatibleInsertionEffect from './useCompatibleInsertionEffect';
+import useHMR from './useHMR';
+import type { ShallowRef, Ref } from 'vue';
+import { onBeforeUnmount, watch, computed } from 'vue';
+
+export type ExtractStyle<CacheValue> = (
+ cache: CacheValue,
+ effectStyles: Record<string, boolean>,
+ options?: {
+ plain?: boolean;
+ },
+) => [order: number, styleId: string, style: string] | null;
+
+export default function useGlobalCache<CacheType>(
+ prefix: string,
+ keyPath: Ref<KeyType[]>,
+ cacheFn: () => CacheType,
+ onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void,
+ // Add additional effect trigger by `useInsertionEffect`
+ onCacheEffect?: (cachedValue: CacheType) => void,
+): ShallowRef<CacheType> {
+ const styleContext = useStyleInject();
+ const globalCache = computed(() => styleContext.value?.cache);
+ const deps = computed(() => [prefix, ...keyPath.value].join('%'));
+
+ const HMRUpdate = useHMR();
+
+ type UpdaterArgs = [times: number, cache: CacheType];
+
+ const buildCache = (updater?: (data: UpdaterArgs) => UpdaterArgs) => {
+ globalCache.value.update(deps.value, prevCache => {
+ const [times = 0, cache] = prevCache || [undefined, undefined];
+
+ // HMR should always ignore cache since developer may change it
+ let tmpCache = cache;
+ if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) {
+ onCacheRemove?.(tmpCache, HMRUpdate);
+ tmpCache = null;
+ }
+
+ const mergedCache = tmpCache || cacheFn();
+
+ const data: UpdaterArgs = [times, mergedCache];
+
+ // Call updater if need additional logic
+ return updater ? updater(data) : data;
+ });
+ };
+
+ watch(deps, () => {
+ buildCache();
+ });
+
+ let cacheEntity = globalCache.value.get(deps.value);
+
+ // HMR clean the cache but not trigger `useMemo` again
+ // Let's fallback of this
+ // ref https://github.com/ant-design/cssinjs/issues/127
+ if (process.env.NODE_ENV !== 'production' && !cacheEntity) {
+ buildCache();
+ cacheEntity = globalCache.value.get(deps.value);
+ }
+
+ const cacheContent = computed(
+ () =>
+ (globalCache.value.get(deps.value) && globalCache.value.get(deps.value)![1]) ||
+ cacheEntity![1],
+ );
+
+ // Remove if no need anymore
+ useCompatibleInsertionEffect(
+ () => {
+ onCacheEffect?.(cacheContent.value);
+ },
+ polyfill => {
+ // It's bad to call build again in effect.
+ // But we have to do this since StrictMode will call effect twice
+ // which will clear cache on the first time.
+ buildCache(([times, cache]) => {
+ if (polyfill && times === 0) {
+ onCacheEffect?.(cacheContent.value);
+ }
+ return [times + 1, cache];
+ });
+
+ return () => {
+ globalCache.value.update(deps.value, prevCache => {
+ const [times = 0, cache] = prevCache || [];
+ const nextCount = times - 1;
+ if (nextCount <= 0) {
+ if (polyfill || !globalCache.value.get(deps.value)) {
+ onCacheRemove?.(cache, false);
+ }
+ return null;
+ }
+
+ return [times - 1, cache];
+ });
+ };
+ },
+ deps,
+ );
+
+ onBeforeUnmount(() => {
+ buildCache();
+ });
+
+ return cacheContent;
+}
diff --git a/components/_util/_cssinjs/hooks/useHMR.ts b/components/_util/_cssinjs/hooks/useHMR.ts
new file mode 100644
index 0000000000..ff54518b89
--- /dev/null
+++ b/components/_util/_cssinjs/hooks/useHMR.ts
@@ -0,0 +1,34 @@
+function useProdHMR() {
+ return false;
+}
+
+let webpackHMR = false;
+
+function useDevHMR() {
+ return webpackHMR;
+}
+
+export default process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR;
+
+// Webpack `module.hot.accept` do not support any deps update trigger
+// We have to hack handler to force mark as HRM
+if (
+ process.env.NODE_ENV !== 'production' &&
+ typeof module !== 'undefined' &&
+ module &&
+ (module as any).hot &&
+ typeof window !== 'undefined'
+) {
+ const win = window as any;
+ if (typeof win.webpackHotUpdate === 'function') {
+ const originWebpackHotUpdate = win.webpackHotUpdate;
+
+ win.webpackHotUpdate = (...args: any[]) => {
+ webpackHMR = true;
+ setTimeout(() => {
+ webpackHMR = false;
+ }, 0);
+ return originWebpackHotUpdate(...args);
+ };
+ }
+}
diff --git a/components/_util/_cssinjs/hooks/useStyleRegister.tsx b/components/_util/_cssinjs/hooks/useStyleRegister.tsx
new file mode 100644
index 0000000000..0a39abbad6
--- /dev/null
+++ b/components/_util/_cssinjs/hooks/useStyleRegister.tsx
@@ -0,0 +1,484 @@
+import hash from '@emotion/hash';
+import type * as CSS from 'csstype';
+// @ts-ignore
+import unitless from '@emotion/unitless';
+import { compile, serialize, stringify } from 'stylis';
+import type { Theme, Transformer } from '..';
+import type Keyframes from '../Keyframes';
+import type { Linter } from '../linters';
+import { contentQuotesLinter, hashedAnimationLinter } from '../linters';
+import type { HashPriority } from '../StyleContext';
+import {
+ useStyleInject,
+ ATTR_CACHE_PATH,
+ ATTR_MARK,
+ ATTR_TOKEN,
+ CSS_IN_JS_INSTANCE,
+} from '../StyleContext';
+import { isClientSide, supportLayer, toStyleStr } from '../util';
+import { CSS_FILE_STYLE, existPath, getStyleAndHash } from '../util/cacheMapUtil';
+import type { ExtractStyle } from './useGlobalCache';
+import useGlobalCache from './useGlobalCache';
+import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS';
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+import type { VueNode } from '../../type';
+
+const SKIP_CHECK = '_skip_check_';
+const MULTI_VALUE = '_multi_value_';
+
+export type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & {
+ animationName?: CSS.PropertiesFallback<number | string>['animationName'] | Keyframes;
+};
+
+export type CSSPropertiesWithMultiValues = {
+ [K in keyof CSSProperties]:
+ | CSSProperties[K]
+ | readonly Extract<CSSProperties[K], string>[]
+ | {
+ [SKIP_CHECK]?: boolean;
+ [MULTI_VALUE]?: boolean;
+ value: CSSProperties[K] | CSSProperties[K][];
+ };
+};
+
+export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };
+
+type ArrayCSSInterpolation = readonly CSSInterpolation[];
+
+export type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject;
+
+export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation | Keyframes;
+
+export type CSSOthersObject = Record<string, CSSInterpolation>;
+
+// @ts-ignore
+export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {}
+
+// ============================================================================
+// == Parser ==
+// ============================================================================
+// Preprocessor style content to browser support one
+export function normalizeStyle(styleStr: string): string {
+ const serialized = serialize(compile(styleStr), stringify);
+ return serialized.replace(/\{%%%\:[^;];}/g, ';');
+}
+
+function isCompoundCSSProperty(value: CSSObject[string]) {
+ return typeof value === 'object' && value && (SKIP_CHECK in value || MULTI_VALUE in value);
+}
+
+// 注入 hash 值
+function injectSelectorHash(key: string, hashId: string, hashPriority?: HashPriority) {
+ if (!hashId) {
+ return key;
+ }
+
+ const hashClassName = `.${hashId}`;
+ const hashSelector = hashPriority === 'low' ? `:where(${hashClassName})` : hashClassName;
+
+ // 注入 hashId
+ const keys = key.split(',').map(k => {
+ const fullPath = k.trim().split(/\s+/);
+
+ // 如果 Selector 第一个是 HTML Element，那我们就插到它的后面。反之，就插到最前面。
+ let firstPath = fullPath[0] || '';
+ const htmlElement = firstPath.match(/^\w+/)?.[0] || '';
+
+ firstPath = `${htmlElement}${hashSelector}${firstPath.slice(htmlElement.length)}`;
+
+ return [firstPath, ...fullPath.slice(1)].join(' ');
+ });
+ return keys.join(',');
+}
+
+export interface ParseConfig {
+ hashId?: string;
+ hashPriority?: HashPriority;
+ layer?: string;
+ path?: string;
+ transformers?: Transformer[];
+ linters?: Linter[];
+}
+
+export interface ParseInfo {
+ root?: boolean;
+ injectHash?: boolean;
+ parentSelectors: string[];
+}
+
+// Parse CSSObject to style content
+export const parseStyle = (
+ interpolation: CSSInterpolation,
+ config: ParseConfig = {},
+ { root, injectHash, parentSelectors }: ParseInfo = {
+ root: true,
+ parentSelectors: [],
+ },
+): [
+ parsedStr: string,
+ // Style content which should be unique on all of the style (e.g. Keyframes).
+ // Firefox will flick with same animation name when exist multiple same keyframes.
+ effectStyle: Record<string, string>,
+] => {
+ const { hashId, layer, path, hashPriority, transformers = [], linters = [] } = config;
+ let styleStr = '';
+ let effectStyle: Record<string, string> = {};
+
+ function parseKeyframes(keyframes: Keyframes) {
+ const animationName = keyframes.getName(hashId);
+ if (!effectStyle[animationName]) {
+ const [parsedStr] = parseStyle(keyframes.style, config, {
+ root: false,
+ parentSelectors,
+ });
+
+ effectStyle[animationName] = `@keyframes ${keyframes.getName(hashId)}${parsedStr}`;
+ }
+ }
+
+ function flattenList(list: ArrayCSSInterpolation, fullList: CSSObject[] = []) {
+ list.forEach(item => {
+ if (Array.isArray(item)) {
+ flattenList(item, fullList);
+ } else if (item) {
+ fullList.push(item as CSSObject);
+ }
+ });
+
+ return fullList;
+ }
+
+ const flattenStyleList = flattenList(
+ Array.isArray(interpolation) ? interpolation : [interpolation],
+ );
+
+ flattenStyleList.forEach(originStyle => {
+ // Only root level can use raw string
+ const style: CSSObject = typeof originStyle === 'string' && !root ? {} : originStyle;
+
+ if (typeof style === 'string') {
+ styleStr += `${style}\n`;
+ } else if ((style as any)._keyframe) {
+ // Keyframe
+ parseKeyframes(style as unknown as Keyframes);
+ } else {
+ const mergedStyle = transformers.reduce((prev, trans) => trans?.visit?.(prev) || prev, style);
+
+ // Normal CSSObject
+ Object.keys(mergedStyle).forEach(key => {
+ const value = mergedStyle[key];
+
+ if (
+ typeof value === 'object' &&
+ value &&
+ (key !== 'animationName' || !(value as Keyframes)._keyframe) &&
+ !isCompoundCSSProperty(value)
+ ) {
+ let subInjectHash = false;
+
+ // 当成嵌套对象来处理
+ let mergedKey = key.trim();
+ // Whether treat child as root. In most case it is false.
+ let nextRoot = false;
+
+ // 拆分多个选择器
+ if ((root || injectHash) && hashId) {
+ if (mergedKey.startsWith('@')) {
+ // 略过媒体查询，交给子节点继续插入 hashId
+ subInjectHash = true;
+ } else {
+ // 注入 hashId
+ mergedKey = injectSelectorHash(key, hashId, hashPriority);
+ }
+ } else if (root && !hashId && (mergedKey === '&' || mergedKey === '')) {
+ // In case of `{ '&': { a: { color: 'red' } } }` or `{ '': { a: { color: 'red' } } }` without hashId,
+ // we will get `&{a:{color:red;}}` or `{a:{color:red;}}` string for stylis to compile.
+ // But it does not conform to stylis syntax,
+ // and finally we will get `{color:red;}` as css, which is wrong.
+ // So we need to remove key in root, and treat child `{ a: { color: 'red' } }` as root.
+ mergedKey = '';
+ nextRoot = true;
+ }
+
+ const [parsedStr, childEffectStyle] = parseStyle(value as any, config, {
+ root: nextRoot,
+ injectHash: subInjectHash,
+ parentSelectors: [...parentSelectors, mergedKey],
+ });
+
+ effectStyle = {
+ ...effectStyle,
+ ...childEffectStyle,
+ };
+
+ styleStr += `${mergedKey}${parsedStr}`;
+ } else {
+ function appendStyle(cssKey: string, cssValue: any) {
+ if (
+ process.env.NODE_ENV !== 'production' &&
+ (typeof value !== 'object' || !(value as any)?.[SKIP_CHECK])
+ ) {
+ [contentQuotesLinter, hashedAnimationLinter, ...linters].forEach(linter =>
+ linter(cssKey, cssValue, { path, hashId, parentSelectors }),
+ );
+ }
+
+ // 如果是样式则直接插入
+ const styleName = cssKey.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
+
+ // Auto suffix with px
+ let formatValue = cssValue;
+ if (!unitless[cssKey] && typeof formatValue === 'number' && formatValue !== 0) {
+ formatValue = `${formatValue}px`;
+ }
+
+ // handle animationName & Keyframe value
+ if (cssKey === 'animationName' && (cssValue as Keyframes)?._keyframe) {
+ parseKeyframes(cssValue as Keyframes);
+ formatValue = (cssValue as Keyframes).getName(hashId);
+ }
+
+ styleStr += `${styleName}:${formatValue};`;
+ }
+
+ const actualValue = (value as any)?.value ?? value;
+ if (
+ typeof value === 'object' &&
+ (value as any)?.[MULTI_VALUE] &&
+ Array.isArray(actualValue)
+ ) {
+ actualValue.forEach(item => {
+ appendStyle(key, item);
+ });
+ } else {
+ appendStyle(key, actualValue);
+ }
+ }
+ });
+ }
+ });
+
+ if (!root) {
+ styleStr = `{${styleStr}}`;
+ } else if (layer && supportLayer()) {
+ const layerCells = layer.split(',');
+ const layerName = layerCells[layerCells.length - 1].trim();
+ styleStr = `@layer ${layerName} {${styleStr}}`;
+
+ // Order of layer if needed
+ if (layerCells.length > 1) {
+ // zombieJ: stylis do not support layer order, so we need to handle it manually.
+ styleStr = `@layer ${layer}{%%%:%}${styleStr}`;
+ }
+ }
+
+ return [styleStr, effectStyle];
+};
+
+// ============================================================================
+// == Register ==
+// ============================================================================
+export function uniqueHash(path: (string | number)[], styleStr: string) {
+ return hash(`${path.join('%')}${styleStr}`);
+}
+
+// function Empty() {
+// return null;
+// }
+
+export const STYLE_PREFIX = 'style';
+
+type StyleCacheValue = [
+ styleStr: string,
+ tokenKey: string,
+ styleId: string,
+ effectStyle: Record<string, string>,
+ clientOnly: boolean | undefined,
+ order: number,
+];
+
+/**
+ * Register a style to the global style sheet.
+ */
+export default function useStyleRegister(
+ info: Ref<{
+ theme: Theme<any, any>;
+ token: any;
+ path: string[];
+ hashId?: string;
+ layer?: string;
+ nonce?: string | (() => string);
+ clientOnly?: boolean;
+ /**
+ * Tell cssinjs the insert order of style.
+ * It's useful when you need to insert style
+ * before other style to overwrite for the same selector priority.
+ */
+ order?: number;
+ }>,
+ styleFn: () => CSSInterpolation,
+) {
+ const styleContext = useStyleInject();
+
+ const tokenKey = computed(() => info.value.token._tokenKey as string);
+
+ const fullPath = computed(() => [tokenKey.value, ...info.value.path]);
+
+ // Check if need insert style
+ let isMergedClientSide = isClientSide;
+ if (process.env.NODE_ENV !== 'production' && styleContext.value.mock !== undefined) {
+ isMergedClientSide = styleContext.value.mock === 'client';
+ }
+
+ // const [cacheStyle[0], cacheStyle[1], cacheStyle[2]]
+ useGlobalCache<StyleCacheValue>(
+ STYLE_PREFIX,
+ fullPath,
+ // Create cache if needed
+ () => {
+ const { path, hashId, layer, clientOnly, order = 0 } = info.value;
+ const cachePath = fullPath.value.join('|');
+
+ // Get style from SSR inline style directly
+ if (existPath(cachePath)) {
+ const [inlineCacheStyleStr, styleHash] = getStyleAndHash(cachePath);
+ if (inlineCacheStyleStr) {
+ return [inlineCacheStyleStr, tokenKey.value, styleHash, {}, clientOnly, order];
+ }
+ }
+
+ // Generate style
+ const styleObj = styleFn();
+ const { hashPriority, transformers, linters } = styleContext.value;
+
+ const [parsedStyle, effectStyle] = parseStyle(styleObj, {
+ hashId,
+ hashPriority,
+ layer,
+ path: path.join('-'),
+ transformers,
+ linters,
+ });
+
+ const styleStr = normalizeStyle(parsedStyle);
+ const styleId = uniqueHash(fullPath.value, styleStr);
+
+ return [styleStr, tokenKey.value, styleId, effectStyle, clientOnly, order];
+ },
+
+ // Remove cache if no need
+ ([, , styleId], fromHMR) => {
+ if ((fromHMR || styleContext.value.autoClear) && isClientSide) {
+ removeCSS(styleId, { mark: ATTR_MARK });
+ }
+ },
+
+ // Effect: Inject style here
+ ([styleStr, , styleId, effectStyle]) => {
+ if (isMergedClientSide && styleStr !== CSS_FILE_STYLE) {
+ const mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
+ mark: ATTR_MARK,
+ prepend: 'queue',
+ attachTo: styleContext.value.container,
+ priority: info.value.order,
+ };
+
+ const nonceStr =
+ typeof info.value.nonce === 'function' ? info.value.nonce() : info.value.nonce;
+
+ if (nonceStr) {
+ mergedCSSConfig.csp = { nonce: nonceStr };
+ }
+
+ const style = updateCSS(styleStr, styleId, mergedCSSConfig);
+
+ (style as any)[CSS_IN_JS_INSTANCE] = styleContext.value.cache.instanceId;
+
+ // Used for `useCacheToken` to remove on batch when token removed
+ style.setAttribute(ATTR_TOKEN, tokenKey.value);
+
+ // Debug usage. Dev only
+ if (process.env.NODE_ENV !== 'production') {
+ style.setAttribute(ATTR_CACHE_PATH, fullPath.value.join('|'));
+ }
+
+ // Inject client side effect style
+ Object.keys(effectStyle).forEach(effectKey => {
+ updateCSS(
+ normalizeStyle(effectStyle[effectKey]),
+ `_effect-${effectKey}`,
+ mergedCSSConfig,
+ );
+ });
+ }
+ },
+ );
+
+ return (node: VueNode) => {
+ return node;
+ // let styleNode: VueNode;
+
+ // if (!styleContext.value.ssrInline || isMergedClientSide || !styleContext.value.defaultCache) {
+ // styleNode = <Empty />;
+ // } else {
+ // styleNode = (
+ // <style
+ // {...{
+ // [ATTR_TOKEN]: cacheStyle.value[1],
+ // [ATTR_MARK]: cacheStyle.value[2],
+ // }}
+ // innerHTML={cacheStyle.value[0]}
+ // />
+ // );
+ // }
+
+ // return (
+ // <>
+ // {styleNode}
+ // {node}
+ // </>
+ // );
+ };
+}
+
+export const extract: ExtractStyle<StyleCacheValue> = (cache, effectStyles, options) => {
+ const [styleStr, tokenKey, styleId, effectStyle, clientOnly, order]: StyleCacheValue = cache;
+ const { plain } = options || {};
+
+ // Skip client only style
+ if (clientOnly) {
+ return null;
+ }
+
+ let keyStyleText = styleStr;
+
+ // ====================== Style ======================
+ // Used for rc-util
+ const sharedAttrs = {
+ 'data-vc-order': 'prependQueue',
+ 'data-vc-priority': `${order}`,
+ };
+
+ keyStyleText = toStyleStr(styleStr, tokenKey, styleId, sharedAttrs, plain);
+
+ // =============== Create effect style ===============
+ if (effectStyle) {
+ Object.keys(effectStyle).forEach(effectKey => {
+ // Effect style can be reused
+ if (!effectStyles[effectKey]) {
+ effectStyles[effectKey] = true;
+ const effectStyleStr = normalizeStyle(effectStyle[effectKey]);
+ keyStyleText += toStyleStr(
+ effectStyleStr,
+ tokenKey,
+ `_effect-${effectKey}`,
+ sharedAttrs,
+ plain,
+ );
+ }
+ });
+ }
+
+ return [order, styleId, keyStyleText];
+};
diff --git a/components/_util/_cssinjs/index.ts b/components/_util/_cssinjs/index.ts
new file mode 100644
index 0000000000..5dc10a654c
--- /dev/null
+++ b/components/_util/_cssinjs/index.ts
@@ -0,0 +1,62 @@
+import extractStyle from './extractStyle';
+import useCacheToken, { getComputedToken } from './hooks/useCacheToken';
+import useCSSVarRegister from './hooks/useCSSVarRegister';
+import type { CSSInterpolation, CSSObject } from './hooks/useStyleRegister';
+import useStyleRegister from './hooks/useStyleRegister';
+import Keyframes from './Keyframes';
+import type { Linter } from './linters';
+import {
+ legacyNotSelectorLinter,
+ logicalPropertiesLinter,
+ NaNLinter,
+ parentSelectorLinter,
+} from './linters';
+import type { StyleProviderProps } from './StyleContext';
+import { createCache, StyleProvider } from './StyleContext';
+import type { DerivativeFunc, TokenType } from './theme';
+import { createTheme, Theme } from './theme';
+import type { Transformer } from './transformers/interface';
+import legacyLogicalPropertiesTransformer from './transformers/legacyLogicalProperties';
+import px2remTransformer from './transformers/px2rem';
+import { supportLogicProps, supportWhere, unit } from './util';
+import { token2CSSVar } from './util/css-variables';
+
+export {
+ Theme,
+ createTheme,
+ useStyleRegister,
+ useCSSVarRegister,
+ useCacheToken,
+ createCache,
+ StyleProvider,
+ Keyframes,
+ extractStyle,
+ getComputedToken,
+
+ // Transformer
+ legacyLogicalPropertiesTransformer,
+ px2remTransformer,
+
+ // Linters
+ logicalPropertiesLinter,
+ legacyNotSelectorLinter,
+ parentSelectorLinter,
+ NaNLinter,
+
+ // util
+ token2CSSVar,
+ unit,
+};
+export type {
+ TokenType,
+ CSSObject,
+ CSSInterpolation,
+ DerivativeFunc,
+ Transformer,
+ Linter,
+ StyleProviderProps,
+};
+
+export const _experimental = {
+ supportModernCSS: () => supportWhere() && supportLogicProps(),
+};
diff --git a/components/_util/_cssinjs/linters/NaNLinter.ts b/components/_util/_cssinjs/linters/NaNLinter.ts
new file mode 100644
index 0000000000..72bded76c1
--- /dev/null
+++ b/components/_util/_cssinjs/linters/NaNLinter.ts
@@ -0,0 +1,10 @@
+import type { Linter } from './interface';
+import { lintWarning } from './utils';
+
+const linter: Linter = (key, value, info) => {
+ if ((typeof value === 'string' && /NaN/g.test(value)) || Number.isNaN(value)) {
+ lintWarning(`Unexpected 'NaN' in property '${key}: ${value}'.`, info);
+ }
+};
+
+export default linter;
diff --git a/components/_util/_cssinjs/linters/contentQuotesLinter.ts b/components/_util/_cssinjs/linters/contentQuotesLinter.ts
new file mode 100644
index 0000000000..b1e60f08ce
--- /dev/null
+++ b/components/_util/_cssinjs/linters/contentQuotesLinter.ts
@@ -0,0 +1,25 @@
+import type { Linter } from './interface';
+import { lintWarning } from './utils';
+
+const linter: Linter = (key, value, info) => {
+ if (key === 'content') {
+ // From emotion: https://github.com/emotion-js/emotion/blob/main/packages/serialize/src/index.js#L63
+ const contentValuePattern =
+ /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+ const contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
+ if (
+ typeof value !== 'string' ||
+ (contentValues.indexOf(value) === -1 &&
+ !contentValuePattern.test(value) &&
+ (value.charAt(0) !== value.charAt(value.length - 1) ||
+ (value.charAt(0) !== '"' && value.charAt(0) !== "'")))
+ ) {
+ lintWarning(
+ `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\`.`,
+ info,
+ );
+ }
+ }
+};
+
+export default linter;
diff --git a/components/_util/_cssinjs/linters/hashedAnimationLinter.ts b/components/_util/_cssinjs/linters/hashedAnimationLinter.ts
new file mode 100644
index 0000000000..4c6fc948b3
--- /dev/null
+++ b/components/_util/_cssinjs/linters/hashedAnimationLinter.ts
@@ -0,0 +1,15 @@
+import type { Linter } from './interface';
+import { lintWarning } from './utils';
+
+const linter: Linter = (key, value, info) => {
+ if (key === 'animation') {
+ if (info.hashId && value !== 'none') {
+ lintWarning(
+ `You seem to be using hashed animation '${value}', in which case 'animationName' with Keyframe as value is recommended.`,
+ info,
+ );
+ }
+ }
+};
+
+export default linter;
diff --git a/components/_util/_cssinjs/linters/index.ts b/components/_util/_cssinjs/linters/index.ts
new file mode 100644
index 0000000000..2e31efe53d
--- /dev/null
+++ b/components/_util/_cssinjs/linters/index.ts
@@ -0,0 +1,7 @@
+export { default as contentQuotesLinter } from './contentQuotesLinter';
+export { default as hashedAnimationLinter } from './hashedAnimationLinter';
+export type { Linter } from './interface';
+export { default as legacyNotSelectorLinter } from './legacyNotSelectorLinter';
+export { default as logicalPropertiesLinter } from './logicalPropertiesLinter';
+export { default as NaNLinter } from './NaNLinter';
+export { default as parentSelectorLinter } from './parentSelectorLinter';
diff --git a/components/_util/_cssinjs/linters/interface.ts b/components/_util/_cssinjs/linters/interface.ts
new file mode 100644
index 0000000000..2df3b6bc2f
--- /dev/null
+++ b/components/_util/_cssinjs/linters/interface.ts
@@ -0,0 +1,9 @@
+export interface LinterInfo {
+ path?: string;
+ hashId?: string;
+ parentSelectors: string[];
+}
+
+export interface Linter {
+ (key: string, value: string | number, info: LinterInfo): void;
+}
diff --git a/components/_util/_cssinjs/linters/legacyNotSelectorLinter.ts b/components/_util/_cssinjs/linters/legacyNotSelectorLinter.ts
new file mode 100644
index 0000000000..f38bf5a331
--- /dev/null
+++ b/components/_util/_cssinjs/linters/legacyNotSelectorLinter.ts
@@ -0,0 +1,33 @@
+import type { Linter, LinterInfo } from './interface';
+import { lintWarning } from './utils';
+
+function isConcatSelector(selector: string) {
+ const notContent = selector.match(/:not\(([^)]*)\)/)?.[1] || '';
+
+ // split selector. e.g.
+ // `h1#a.b` => ['h1', #a', '.b']
+ const splitCells = notContent.split(/(\[[^[]*])|(?=[.#])/).filter(str => str);
+
+ return splitCells.length > 1;
+}
+
+function parsePath(info: LinterInfo) {
+ return info.parentSelectors.reduce((prev, cur) => {
+ if (!prev) {
+ return cur;
+ }
+
+ return cur.includes('&') ? cur.replace(/&/g, prev) : `${prev} ${cur}`;
+ }, '');
+}
+
+const linter: Linter = (_key, _value, info) => {
+ const parentSelectorPath = parsePath(info);
+ const notList = parentSelectorPath.match(/:not\([^)]*\)/g) || [];
+
+ if (notList.length > 0 && notList.some(isConcatSelector)) {
+ lintWarning(`Concat ':not' selector not support in legacy browsers.`, info);
+ }
+};
+
+export default linter;
diff --git a/components/_util/_cssinjs/linters/logicalPropertiesLinter.ts b/components/_util/_cssinjs/linters/logicalPropertiesLinter.ts
new file mode 100644
index 0000000000..bdddcf73f4
--- /dev/null
+++ b/components/_util/_cssinjs/linters/logicalPropertiesLinter.ts
@@ -0,0 +1,88 @@
+import type { Linter } from './interface';
+import { lintWarning } from './utils';
+
+const linter: Linter = (key, value, info) => {
+ switch (key) {
+ case 'marginLeft':
+ case 'marginRight':
+ case 'paddingLeft':
+ case 'paddingRight':
+ case 'left':
+ case 'right':
+ case 'borderLeft':
+ case 'borderLeftWidth':
+ case 'borderLeftStyle':
+ case 'borderLeftColor':
+ case 'borderRight':
+ case 'borderRightWidth':
+ case 'borderRightStyle':
+ case 'borderRightColor':
+ case 'borderTopLeftRadius':
+ case 'borderTopRightRadius':
+ case 'borderBottomLeftRadius':
+ case 'borderBottomRightRadius':
+ lintWarning(
+ `You seem to be using non-logical property '${key}' which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
+ info,
+ );
+ return;
+ case 'margin':
+ case 'padding':
+ case 'borderWidth':
+ case 'borderStyle':
+ // case 'borderColor':
+ if (typeof value === 'string') {
+ const valueArr = value.split(' ').map(item => item.trim());
+ if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) {
+ lintWarning(
+ `You seem to be using '${key}' property with different left ${key} and right ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
+ info,
+ );
+ }
+ }
+ return;
+ case 'clear':
+ case 'textAlign':
+ if (value === 'left' || value === 'right') {
+ lintWarning(
+ `You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
+ info,
+ );
+ }
+ return;
+ case 'borderRadius':
+ if (typeof value === 'string') {
+ const radiusGroups = value.split('/').map(item => item.trim());
+ const invalid = radiusGroups.reduce((result, group) => {
+ if (result) {
+ return result;
+ }
+ const radiusArr = group.split(' ').map(item => item.trim());
+ // borderRadius: '2px 4px'
+ if (radiusArr.length >= 2 && radiusArr[0] !== radiusArr[1]) {
+ return true;
+ }
+ // borderRadius: '4px 4px 2px'
+ if (radiusArr.length === 3 && radiusArr[1] !== radiusArr[2]) {
+ return true;
+ }
+ // borderRadius: '4px 4px 2px 4px'
+ if (radiusArr.length === 4 && radiusArr[2] !== radiusArr[3]) {
+ return true;
+ }
+ return result;
+ }, false);
+
+ if (invalid) {
+ lintWarning(
+ `You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
+ info,
+ );
+ }
+ }
+ return;
+ default:
+ }
+};
+
+export default linter;
diff --git a/components/_util/_cssinjs/linters/parentSelectorLinter.ts b/components/_util/_cssinjs/linters/parentSelectorLinter.ts
new file mode 100644
index 0000000000..7a061ce8a5
--- /dev/null
+++ b/components/_util/_cssinjs/linters/parentSelectorLinter.ts
@@ -0,0 +1,15 @@
+import type { Linter } from '..';
+import { lintWarning } from './utils';
+
+const linter: Linter = (_key, _value, info) => {
+ if (
+ info.parentSelectors.some(selector => {
+ const selectors = selector.split(',');
+ return selectors.some(item => item.split('&').length > 2);
+ })
+ ) {
+ lintWarning('Should not use more than one `&` in a selector.', info);
+ }
+};
+
+export default linter;
diff --git a/components/_util/_cssinjs/linters/utils.ts b/components/_util/_cssinjs/linters/utils.ts
new file mode 100644
index 0000000000..83c80cb3ce
--- /dev/null
+++ b/components/_util/_cssinjs/linters/utils.ts
@@ -0,0 +1,13 @@
+import devWarning from '../../../vc-util/warning';
+import type { LinterInfo } from './interface';
+
+export function lintWarning(message: string, info: LinterInfo) {
+ const { path, parentSelectors } = info;
+
+ devWarning(
+ false,
+ `[Ant Design Vue CSS-in-JS] ${path ? `Error in ${path}: ` : ''}${message}${
+ parentSelectors.length ? ` Selector: ${parentSelectors.join(' | ')}` : ''
+ }`,
+ );
+}
diff --git a/components/_util/_cssinjs/theme/Theme.ts b/components/_util/_cssinjs/theme/Theme.ts
new file mode 100644
index 0000000000..608bdde6cd
--- /dev/null
+++ b/components/_util/_cssinjs/theme/Theme.ts
@@ -0,0 +1,38 @@
+import warning from '../../warning';
+import type { DerivativeFunc, TokenType } from './interface';
+
+let uuid = 0;
+
+/**
+ * Theme with algorithms to derive tokens from design tokens.
+ * Use `createTheme` first which will help to manage the theme instance cache.
+ */
+export default class Theme<DesignToken extends TokenType, DerivativeToken extends TokenType> {
+ private derivatives: DerivativeFunc<DesignToken, DerivativeToken>[];
+ public readonly id: number;
+
+ constructor(
+ derivatives:
+ | DerivativeFunc<DesignToken, DerivativeToken>
+ | DerivativeFunc<DesignToken, DerivativeToken>[],
+ ) {
+ this.derivatives = Array.isArray(derivatives) ? derivatives : [derivatives];
+ this.id = uuid;
+
+ if (derivatives.length === 0) {
+ warning(
+ derivatives.length > 0,
+ '[Ant Design Vue CSS-in-JS] Theme should have at least one derivative function.',
+ );
+ }
+
+ uuid += 1;
+ }
+
+ getDerivativeToken(token: DesignToken): DerivativeToken {
+ return this.derivatives.reduce<DerivativeToken>(
+ (result, derivative) => derivative(token, result),
+ undefined as any,
+ );
+ }
+}
diff --git a/components/_util/_cssinjs/theme/ThemeCache.ts b/components/_util/_cssinjs/theme/ThemeCache.ts
new file mode 100644
index 0000000000..db76ffa6a4
--- /dev/null
+++ b/components/_util/_cssinjs/theme/ThemeCache.ts
@@ -0,0 +1,135 @@
+import type Theme from './Theme';
+import type { DerivativeFunc } from './interface';
+
+// ================================== Cache ==================================
+type ThemeCacheMap = Map<
+ DerivativeFunc<any, any>,
+ {
+ map?: ThemeCacheMap;
+ value?: [Theme<any, any>, number];
+ }
+>;
+
+type DerivativeOptions = DerivativeFunc<any, any>[];
+
+export function sameDerivativeOption(left: DerivativeOptions, right: DerivativeOptions) {
+ if (left.length !== right.length) {
+ return false;
+ }
+ for (let i = 0; i < left.length; i++) {
+ if (left[i] !== right[i]) {
+ return false;
+ }
+ }
+ return true;
+}
+
+export default class ThemeCache {
+ public static MAX_CACHE_SIZE = 20;
+ public static MAX_CACHE_OFFSET = 5;
+
+ private readonly cache: ThemeCacheMap;
+ private keys: DerivativeOptions[];
+ private cacheCallTimes: number;
+
+ constructor() {
+ this.cache = new Map();
+ this.keys = [];
+ this.cacheCallTimes = 0;
+ }
+
+ public size(): number {
+ return this.keys.length;
+ }
+
+ private internalGet(
+ derivativeOption: DerivativeOptions,
+ updateCallTimes = false,
+ ): [Theme<any, any>, number] | undefined {
+ let cache: ReturnType<ThemeCacheMap['get']> = { map: this.cache };
+ derivativeOption.forEach(derivative => {
+ if (!cache) {
+ cache = undefined;
+ } else {
+ cache = cache?.map?.get(derivative);
+ }
+ });
+ if (cache?.value && updateCallTimes) {
+ cache.value[1] = this.cacheCallTimes++;
+ }
+ return cache?.value;
+ }
+
+ public get(derivativeOption: DerivativeOptions): Theme<any, any> | undefined {
+ return this.internalGet(derivativeOption, true)?.[0];
+ }
+
+ public has(derivativeOption: DerivativeOptions): boolean {
+ return !!this.internalGet(derivativeOption);
+ }
+
+ public set(derivativeOption: DerivativeOptions, value: Theme<any, any>): void {
+ // New cache
+ if (!this.has(derivativeOption)) {
+ if (this.size() + 1 > ThemeCache.MAX_CACHE_SIZE + ThemeCache.MAX_CACHE_OFFSET) {
+ const [targetKey] = this.keys.reduce<[DerivativeOptions, number]>(
+ (result, key) => {
+ const [, callTimes] = result;
+ if (this.internalGet(key)![1] < callTimes) {
+ return [key, this.internalGet(key)![1]];
+ }
+ return result;
+ },
+ [this.keys[0], this.cacheCallTimes],
+ );
+ this.delete(targetKey);
+ }
+
+ this.keys.push(derivativeOption);
+ }
+
+ let cache = this.cache;
+ derivativeOption.forEach((derivative, index) => {
+ if (index === derivativeOption.length - 1) {
+ cache.set(derivative, { value: [value, this.cacheCallTimes++] });
+ } else {
+ const cacheValue = cache.get(derivative);
+ if (!cacheValue) {
+ cache.set(derivative, { map: new Map() });
+ } else if (!cacheValue.map) {
+ cacheValue.map = new Map();
+ }
+ cache = cache.get(derivative)!.map!;
+ }
+ });
+ }
+
+ private deleteByPath(
+ currentCache: ThemeCacheMap,
+ derivatives: DerivativeFunc<any, any>[],
+ ): Theme<any, any> | undefined {
+ const cache = currentCache.get(derivatives[0])!;
+ if (derivatives.length === 1) {
+ if (!cache.map) {
+ currentCache.delete(derivatives[0]);
+ } else {
+ currentCache.set(derivatives[0], { map: cache.map });
+ }
+ return cache.value?.[0];
+ }
+ const result = this.deleteByPath(cache.map!, derivatives.slice(1));
+ if ((!cache.map || cache.map.size === 0) && !cache.value) {
+ currentCache.delete(derivatives[0]);
+ }
+ return result;
+ }
+
+ public delete(derivativeOption: DerivativeOptions): Theme<any, any> | undefined {
+ // If cache exists
+ if (this.has(derivativeOption)) {
+ this.keys = this.keys.filter(item => !sameDerivativeOption(item, derivativeOption));
+ return this.deleteByPath(this.cache, derivativeOption);
+ }
+ return undefined;
+ }
+}
diff --git a/components/_util/_cssinjs/theme/createTheme.ts b/components/_util/_cssinjs/theme/createTheme.ts
new file mode 100644
index 0000000000..9f73f58a16
--- /dev/null
+++ b/components/_util/_cssinjs/theme/createTheme.ts
@@ -0,0 +1,26 @@
+import ThemeCache from './ThemeCache';
+import Theme from './Theme';
+import type { DerivativeFunc, TokenType } from './interface';
+
+const cacheThemes = new ThemeCache();
+
+/**
+ * Same as new Theme, but will always return same one if `derivative` not changed.
+ */
+export default function createTheme<
+ DesignToken extends TokenType,
+ DerivativeToken extends TokenType,
+>(
+ derivatives:
+ | DerivativeFunc<DesignToken, DerivativeToken>[]
+ | DerivativeFunc<DesignToken, DerivativeToken>,
+) {
+ const derivativeArr = Array.isArray(derivatives) ? derivatives : [derivatives];
+ // Create new theme if not exist
+ if (!cacheThemes.has(derivativeArr)) {
+ cacheThemes.set(derivativeArr, new Theme(derivativeArr));
+ }
+
+ // Get theme from cache and return
+ return cacheThemes.get(derivativeArr)!;
+}
diff --git a/components/_util/_cssinjs/theme/index.ts b/components/_util/_cssinjs/theme/index.ts
new file mode 100644
index 0000000000..b3c2ff4b1e
--- /dev/null
+++ b/components/_util/_cssinjs/theme/index.ts
@@ -0,0 +1,4 @@
+export { default as createTheme } from './createTheme';
+export { default as Theme } from './Theme';
+export { default as ThemeCache } from './ThemeCache';
+export type { TokenType, DerivativeFunc } from './interface';
diff --git a/components/_util/_cssinjs/theme/interface.ts b/components/_util/_cssinjs/theme/interface.ts
new file mode 100644
index 0000000000..827706ce2c
--- /dev/null
+++ b/components/_util/_cssinjs/theme/interface.ts
@@ -0,0 +1,5 @@
+export type TokenType = object;
+export type DerivativeFunc<DesignToken extends TokenType, DerivativeToken extends TokenType> = (
+ designToken: DesignToken,
+ derivativeToken?: DerivativeToken,
+) => DerivativeToken;
diff --git a/components/_util/_cssinjs/transformers/interface.ts b/components/_util/_cssinjs/transformers/interface.ts
new file mode 100644
index 0000000000..a7120e8148
--- /dev/null
+++ b/components/_util/_cssinjs/transformers/interface.ts
@@ -0,0 +1,5 @@
+import type { CSSObject } from '..';
+
+export interface Transformer {
+ visit?: (cssObj: CSSObject) => CSSObject;
+}
diff --git a/components/_util/_cssinjs/transformers/legacyLogicalProperties.ts b/components/_util/_cssinjs/transformers/legacyLogicalProperties.ts
new file mode 100644
index 0000000000..7a33c1a0c5
--- /dev/null
+++ b/components/_util/_cssinjs/transformers/legacyLogicalProperties.ts
@@ -0,0 +1,173 @@
+import type { CSSObject } from '..';
+import type { Transformer } from './interface';
+
+function splitValues(value: string | number): [values: (string | number)[], important: boolean] {
+ if (typeof value === 'number') {
+ return [[value], false];
+ }
+
+ const rawStyle = String(value).trim();
+ const importantCells = rawStyle.match(/(.*)(!important)/);
+
+ const splitStyle = (importantCells ? importantCells[1] : rawStyle).trim().split(/\s+/);
+
+ // Combine styles split in brackets, like `calc(1px + 2px)`
+ let temp = '';
+ let brackets = 0;
+ return [
+ splitStyle.reduce<string[]>((list, item) => {
+ if (item.includes('(') || item.includes(')')) {
+ const left = item.split('(').length - 1;
+ const right = item.split(')').length - 1;
+ brackets += left - right;
+ }
+ if (brackets === 0) {
+ list.push(temp + item);
+ temp = '';
+ } else if (brackets > 0) {
+ temp += item;
+ }
+ return list;
+ }, []),
+ !!importantCells,
+ ];
+}
+
+type MatchValue = string[] & {
+ notSplit?: boolean;
+};
+
+function noSplit(list: MatchValue): MatchValue {
+ list.notSplit = true;
+ return list;
+}
+
+const keyMap: Record<string, MatchValue> = {
+ // Inset
+ inset: ['top', 'right', 'bottom', 'left'],
+ insetBlock: ['top', 'bottom'],
+ insetBlockStart: ['top'],
+ insetBlockEnd: ['bottom'],
+ insetInline: ['left', 'right'],
+ insetInlineStart: ['left'],
+ insetInlineEnd: ['right'],
+
+ // Margin
+ marginBlock: ['marginTop', 'marginBottom'],
+ marginBlockStart: ['marginTop'],
+ marginBlockEnd: ['marginBottom'],
+ marginInline: ['marginLeft', 'marginRight'],
+ marginInlineStart: ['marginLeft'],
+ marginInlineEnd: ['marginRight'],
+
+ // Padding
+ paddingBlock: ['paddingTop', 'paddingBottom'],
+ paddingBlockStart: ['paddingTop'],
+ paddingBlockEnd: ['paddingBottom'],
+ paddingInline: ['paddingLeft', 'paddingRight'],
+ paddingInlineStart: ['paddingLeft'],
+ paddingInlineEnd: ['paddingRight'],
+
+ // Border
+ borderBlock: noSplit(['borderTop', 'borderBottom']),
+ borderBlockStart: noSplit(['borderTop']),
+ borderBlockEnd: noSplit(['borderBottom']),
+ borderInline: noSplit(['borderLeft', 'borderRight']),
+ borderInlineStart: noSplit(['borderLeft']),
+ borderInlineEnd: noSplit(['borderRight']),
+
+ // Border width
+ borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'],
+ borderBlockStartWidth: ['borderTopWidth'],
+ borderBlockEndWidth: ['borderBottomWidth'],
+ borderInlineWidth: ['borderLeftWidth', 'borderRightWidth'],
+ borderInlineStartWidth: ['borderLeftWidth'],
+ borderInlineEndWidth: ['borderRightWidth'],
+
+ // Border style
+ borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'],
+ borderBlockStartStyle: ['borderTopStyle'],
+ borderBlockEndStyle: ['borderBottomStyle'],
+ borderInlineStyle: ['borderLeftStyle', 'borderRightStyle'],
+ borderInlineStartStyle: ['borderLeftStyle'],
+ borderInlineEndStyle: ['borderRightStyle'],
+
+ // Border color
+ borderBlockColor: ['borderTopColor', 'borderBottomColor'],
+ borderBlockStartColor: ['borderTopColor'],
+ borderBlockEndColor: ['borderBottomColor'],
+ borderInlineColor: ['borderLeftColor', 'borderRightColor'],
+ borderInlineStartColor: ['borderLeftColor'],
+ borderInlineEndColor: ['borderRightColor'],
+
+ // Border radius
+ borderStartStartRadius: ['borderTopLeftRadius'],
+ borderStartEndRadius: ['borderTopRightRadius'],
+ borderEndStartRadius: ['borderBottomLeftRadius'],
+ borderEndEndRadius: ['borderBottomRightRadius'],
+};
+
+function wrapImportantAndSkipCheck(value: string | number, important: boolean) {
+ let parsedValue = value;
+
+ if (important) {
+ parsedValue = `${parsedValue} !important`;
+ }
+
+ return { _skip_check_: true, value: parsedValue };
+}
+
+/**
+ * Convert css logical properties to legacy properties.
+ * Such as: `margin-block-start` to `margin-top`.
+ * Transform list:
+ * - inset
+ * - margin
+ * - padding
+ * - border
+ */
+const transform: Transformer = {
+ visit: cssObj => {
+ const clone: CSSObject = {};
+
+ Object.keys(cssObj).forEach(key => {
+ const value = cssObj[key];
+ const matchValue = keyMap[key];
+
+ if (matchValue && (typeof value === 'number' || typeof value === 'string')) {
+ const [values, important] = splitValues(value);
+
+ if (matchValue.length && matchValue.notSplit) {
+ // not split means always give same value like border
+ matchValue.forEach(matchKey => {
+ clone[matchKey] = wrapImportantAndSkipCheck(value, important);
+ });
+ } else if (matchValue.length === 1) {
+ // Handle like `marginBlockStart` => `marginTop`
+ clone[matchValue[0]] = wrapImportantAndSkipCheck(value, important);
+ } else if (matchValue.length === 2) {
+ // Handle like `marginBlock` => `marginTop` & `marginBottom`
+ matchValue.forEach((matchKey, index) => {
+ clone[matchKey] = wrapImportantAndSkipCheck(values[index] ?? values[0], important);
+ });
+ } else if (matchValue.length === 4) {
+ // Handle like `inset` => `top` & `right` & `bottom` & `left`
+ matchValue.forEach((matchKey, index) => {
+ clone[matchKey] = wrapImportantAndSkipCheck(
+ values[index] ?? values[index - 2] ?? values[0],
+ important,
+ );
+ });
+ } else {
+ clone[key] = value;
+ }
+ } else {
+ clone[key] = value;
+ }
+ });
+
+ return clone;
+ },
+};
+
+export default transform;
diff --git a/components/_util/_cssinjs/transformers/px2rem.ts b/components/_util/_cssinjs/transformers/px2rem.ts
new file mode 100644
index 0000000000..593a107b24
--- /dev/null
+++ b/components/_util/_cssinjs/transformers/px2rem.ts
@@ -0,0 +1,77 @@
+/**
+ * respect https://github.com/cuth/postcss-pxtorem
+ */
+// @ts-ignore
+import unitless from '@emotion/unitless';
+import type { CSSObject } from '..';
+import type { Transformer } from './interface';
+
+export interface Options {
+ /**
+ * The root font size.
+ * @default 16
+ */
+ rootValue?: number;
+ /**
+ * The decimal numbers to allow the REM units to grow to.
+ * @default 5
+ */
+ precision?: number;
+ /**
+ * Whether to allow px to be converted in media queries.
+ * @default false
+ */
+ mediaQuery?: boolean;
+}
+
+const pxRegex = /url\([^)]+\)|var\([^)]+\)|(\d*\.?\d+)px/g;
+
+function toFixed(number: number, precision: number) {
+ const multiplier = Math.pow(10, precision + 1),
+ wholeNumber = Math.floor(number * multiplier);
+ return (Math.round(wholeNumber / 10) * 10) / multiplier;
+}
+
+const transform = (options: Options = {}): Transformer => {
+ const { rootValue = 16, precision = 5, mediaQuery = false } = options;
+
+ const pxReplace = (m: string, $1: any) => {
+ if (!$1) return m;
+ const pixels = parseFloat($1);
+ // covenant: pixels <= 1, not transform to rem @zombieJ
+ if (pixels <= 1) return m;
+ const fixedVal = toFixed(pixels / rootValue, precision);
+ return `${fixedVal}rem`;
+ };
+
+ const visit = (cssObj: CSSObject): CSSObject => {
+ const clone: CSSObject = { ...cssObj };
+
+ Object.entries(cssObj).forEach(([key, value]) => {
+ if (typeof value === 'string' && value.includes('px')) {
+ const newValue = value.replace(pxRegex, pxReplace);
+ clone[key] = newValue;
+ }
+
+ // no unit
+ if (!unitless[key] && typeof value === 'number' && value !== 0) {
+ clone[key] = `${value}px`.replace(pxRegex, pxReplace);
+ }
+
+ // Media queries
+ const mergedKey = key.trim();
+ if (mergedKey.startsWith('@') && mergedKey.includes('px') && mediaQuery) {
+ const newKey = key.replace(pxRegex, pxReplace);
+
+ clone[newKey] = clone[key];
+ delete clone[key];
+ }
+ });
+
+ return clone;
+ };
+
+ return { visit };
+};
+
+export default transform;
diff --git a/components/_util/_cssinjs/util/cacheMapUtil.ts b/components/_util/_cssinjs/util/cacheMapUtil.ts
new file mode 100644
index 0000000000..813af183d1
--- /dev/null
+++ b/components/_util/_cssinjs/util/cacheMapUtil.ts
@@ -0,0 +1,91 @@
+import canUseDom from '../../canUseDom';
+import { ATTR_MARK } from '../StyleContext';
+
+export const ATTR_CACHE_MAP = 'data-ant-cssinjs-cache-path';
+
+/**
+ * This marks style from the css file.
+ * Which means not exist in `<style />` tag.
+ */
+export const CSS_FILE_STYLE = '_FILE_STYLE__';
+
+export function serialize(cachePathMap: Record<string, string>) {
+ return Object.keys(cachePathMap)
+ .map(path => {
+ const hash = cachePathMap[path];
+ return `${path}:${hash}`;
+ })
+ .join(';');
+}
+
+let cachePathMap: Record<string, string>;
+let fromCSSFile = true;
+
+/**
+ * @private Test usage only. Can save remove if no need.
+ */
+export function reset(mockCache?: Record<string, string>, fromFile = true) {
+ cachePathMap = mockCache!;
+ fromCSSFile = fromFile;
+}
+
+export function prepare() {
+ if (!cachePathMap) {
+ cachePathMap = {};
+
+ if (canUseDom()) {
+ const div = document.createElement('div');
+ div.className = ATTR_CACHE_MAP;
+ div.style.position = 'fixed';
+ div.style.visibility = 'hidden';
+ div.style.top = '-9999px';
+ document.body.appendChild(div);
+
+ let content = getComputedStyle(div).content || '';
+ content = content.replace(/^"/, '').replace(/"$/, '');
+
+ // Fill data
+ content.split(';').forEach(item => {
+ const [path, hash] = item.split(':');
+ cachePathMap[path] = hash;
+ });
+
+ // Remove inline record style
+ const inlineMapStyle = document.querySelector(`style[${ATTR_CACHE_MAP}]`);
+ if (inlineMapStyle) {
+ fromCSSFile = false;
+ inlineMapStyle.parentNode?.removeChild(inlineMapStyle);
+ }
+
+ document.body.removeChild(div);
+ }
+ }
+}
+
+export function existPath(path: string) {
+ prepare();
+
+ return !!cachePathMap[path];
+}
+
+export function getStyleAndHash(path: string): [style: string | null, hash: string] {
+ const hash = cachePathMap[path];
+ let styleStr: string | null = null;
+
+ if (hash && canUseDom()) {
+ if (fromCSSFile) {
+ styleStr = CSS_FILE_STYLE;
+ } else {
+ const style = document.querySelector(`style[${ATTR_MARK}="${cachePathMap[path]}"]`);
+
+ if (style) {
+ styleStr = style.innerHTML;
+ } else {
+ // Clean up since not exist anymore
+ delete cachePathMap[path];
+ }
+ }
+ }
+
+ return [styleStr, hash];
+}
diff --git a/components/_util/_cssinjs/util/css-variables.ts b/components/_util/_cssinjs/util/css-variables.ts
new file mode 100644
index 0000000000..6a3dc6c36e
--- /dev/null
+++ b/components/_util/_cssinjs/util/css-variables.ts
@@ -0,0 +1,58 @@
+export const token2CSSVar = (token: string, prefix = '') => {
+ return `--${prefix ? `${prefix}-` : ''}${token}`
+ .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+ .replace(/([A-Z]+)([A-Z][a-z0-9]+)/g, '$1-$2')
+ .replace(/([a-z])([A-Z0-9])/g, '$1-$2')
+ .toLowerCase();
+};
+
+export const serializeCSSVar = <T extends Record<string, any>>(
+ cssVars: T,
+ hashId: string,
+ options?: {
+ scope?: string;
+ },
+) => {
+ if (!Object.keys(cssVars).length) {
+ return '';
+ }
+ return `.${hashId}${options?.scope ? `.${options.scope}` : ''}{${Object.entries(cssVars)
+ .map(([key, value]) => `${key}:${value};`)
+ .join('')}}`;
+};
+
+export type TokenWithCSSVar<V, T extends Record<string, V> = Record<string, V>> = {
+ [key in keyof T]?: string | V;
+};
+
+export const transformToken = <V, T extends Record<string, V> = Record<string, V>>(
+ token: T,
+ themeKey: string,
+ config?: {
+ prefix?: string;
+ ignore?: {
+ [key in keyof T]?: boolean;
+ };
+ unitless?: {
+ [key in keyof T]?: boolean;
+ };
+ preserve?: {
+ [key in keyof T]?: boolean;
+ };
+ scope?: string;
+ },
+): [TokenWithCSSVar<V, T>, string] => {
+ const cssVars: Record<string, string> = {};
+ const result: TokenWithCSSVar<V, T> = {};
+ Object.entries(token).forEach(([key, value]) => {
+ if (config?.preserve?.[key]) {
+ result[key as keyof T] = value;
+ } else if ((typeof value === 'string' || typeof value === 'number') && !config?.ignore?.[key]) {
+ const cssVar = token2CSSVar(key, config?.prefix);
+ cssVars[cssVar] =
+ typeof value === 'number' && !config?.unitless?.[key] ? `${value}px` : String(value);
+ result[key as keyof T] = `var(${cssVar})`;
+ }
+ });
+ return [result, serializeCSSVar(cssVars, themeKey, { scope: config?.scope })];
+};
diff --git a/components/_util/_cssinjs/util/index.ts b/components/_util/_cssinjs/util/index.ts
new file mode 100644
index 0000000000..ae59f90e7a
--- /dev/null
+++ b/components/_util/_cssinjs/util/index.ts
@@ -0,0 +1,179 @@
+import hash from '@emotion/hash';
+import canUseDom from '../../canUseDom';
+import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS';
+import { ATTR_MARK, ATTR_TOKEN } from '../StyleContext';
+import { Theme } from '../theme';
+
+// Create a cache for memo concat
+type NestWeakMap<T> = WeakMap<object, NestWeakMap<T> | T>;
+const resultCache: NestWeakMap<object> = new WeakMap();
+const RESULT_VALUE = {};
+
+export function memoResult<T extends object, R>(callback: () => R, deps: T[]): R {
+ let current: WeakMap<any, any> = resultCache;
+ for (let i = 0; i < deps.length; i += 1) {
+ const dep = deps[i];
+ if (!current.has(dep)) {
+ current.set(dep, new WeakMap());
+ }
+ current = current.get(dep)!;
+ }
+
+ if (!current.has(RESULT_VALUE)) {
+ current.set(RESULT_VALUE, callback());
+ }
+
+ return current.get(RESULT_VALUE);
+}
+
+// Create a cache here to avoid always loop generate
+const flattenTokenCache = new WeakMap<any, string>();
+
+/**
+ * Flatten token to string, this will auto cache the result when token not change
+ */
+export function flattenToken(token: any) {
+ let str = flattenTokenCache.get(token) || '';
+
+ if (!str) {
+ Object.keys(token).forEach(key => {
+ const value = token[key];
+ str += key;
+ if (value instanceof Theme) {
+ str += value.id;
+ } else if (value && typeof value === 'object') {
+ str += flattenToken(value);
+ } else {
+ str += value;
+ }
+ });
+
+ // Put in cache
+ flattenTokenCache.set(token, str);
+ }
+ return str;
+}
+
+/**
+ * Convert derivative token to key string
+ */
+export function token2key(token: any, salt: string): string {
+ return hash(`${salt}_${flattenToken(token)}`);
+}
+
+const randomSelectorKey = `random-${Date.now()}-${Math.random()}`.replace(/\./g, '');
+
+// Magic `content` for detect selector support
+const checkContent = '_bAmBoO_';
+
+function supportSelector(
+ styleStr: string,
+ handleElement: (ele: HTMLElement) => void,
+ supportCheck?: (ele: HTMLElement) => boolean,
+): boolean {
+ if (canUseDom()) {
+ updateCSS(styleStr, randomSelectorKey);
+
+ const ele = document.createElement('div');
+ ele.style.position = 'fixed';
+ ele.style.left = '0';
+ ele.style.top = '0';
+ handleElement?.(ele);
+ document.body.appendChild(ele);
+
+ if (process.env.NODE_ENV !== 'production') {
+ ele.innerHTML = 'Test';
+ ele.style.zIndex = '9999999';
+ }
+
+ const support = supportCheck
+ ? supportCheck(ele)
+ : getComputedStyle(ele).content?.includes(checkContent);
+
+ ele.parentNode?.removeChild(ele);
+ removeCSS(randomSelectorKey);
+
+ return support;
+ }
+
+ return false;
+}
+
+let canLayer: boolean | undefined = undefined;
+export function supportLayer(): boolean {
+ if (canLayer === undefined) {
+ canLayer = supportSelector(
+ `@layer ${randomSelectorKey} { .${randomSelectorKey} { content: "${checkContent}"!important; } }`,
+ ele => {
+ ele.className = randomSelectorKey;
+ },
+ );
+ }
+
+ return canLayer!;
+}
+
+let canWhere: boolean | undefined = undefined;
+export function supportWhere(): boolean {
+ if (canWhere === undefined) {
+ canWhere = supportSelector(
+ `:where(.${randomSelectorKey}) { content: "${checkContent}"!important; }`,
+ ele => {
+ ele.className = randomSelectorKey;
+ },
+ );
+ }
+
+ return canWhere!;
+}
+
+let canLogic: boolean | undefined = undefined;
+export function supportLogicProps(): boolean {
+ if (canLogic === undefined) {
+ canLogic = supportSelector(
+ `.${randomSelectorKey} { inset-block: 93px !important; }`,
+ ele => {
+ ele.className = randomSelectorKey;
+ },
+ ele => getComputedStyle(ele).bottom === '93px',
+ );
+ }
+
+ return canLogic!;
+}
+
+export const isClientSide = canUseDom();
+
+export function unit(num: string | number) {
+ if (typeof num === 'number') {
+ return `${num}px`;
+ }
+ return num;
+}
+
+export function toStyleStr(
+ style: string,
+ tokenKey?: string,
+ styleId?: string,
+ customizeAttrs: Record<string, string> = {},
+ plain = false,
+) {
+ if (plain) {
+ return style;
+ }
+ const attrs: Record<string, string | undefined> = {
+ ...customizeAttrs,
+ [ATTR_TOKEN]: tokenKey,
+ [ATTR_MARK]: styleId,
+ };
+
+ const attrStr = Object.keys(attrs)
+ .map(attr => {
+ const val = attrs[attr];
+ return val ? `${attr}="${val}"` : null;
+ })
+ .filter(v => v)
+ .join(' ');
+
+ return `<style ${attrStr}>${style}</style>`;
+}
diff --git a/components/_util/hooks/useLayoutEffect.ts b/components/_util/hooks/useLayoutEffect.ts
new file mode 100644
index 0000000000..6f17aedaa3
--- /dev/null
+++ b/components/_util/hooks/useLayoutEffect.ts
@@ -0,0 +1,48 @@
+import type { Ref, ShallowRef } from 'vue';
+
+import { shallowRef, ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
+
+function useLayoutEffect(
+ fn: (mount: boolean) => void | VoidFunction,
+ deps?: Ref<any> | Ref<any>[] | ShallowRef<any> | ShallowRef<any>[],
+) {
+ const firstMount = shallowRef(true);
+ const cleanupFn = ref(null);
+ let stopWatch = null;
+
+ stopWatch = watch(
+ deps,
+ () => {
+ nextTick(() => {
+ if (cleanupFn.value) {
+ cleanupFn.value();
+ }
+ cleanupFn.value = fn(firstMount.value);
+ });
+ },
+ { immediate: true, flush: 'post' },
+ );
+
+ onMounted(() => {
+ firstMount.value = false;
+ });
+
+ onUnmounted(() => {
+ if (cleanupFn.value) {
+ cleanupFn.value();
+ }
+ if (stopWatch) {
+ stopWatch();
+ }
+ });
+}
+
+export const useLayoutUpdateEffect = (callback, deps) => {
+ useLayoutEffect(firstMount => {
+ if (!firstMount) {
+ return callback();
+ }
+ }, deps);
+};
+
+export default useLayoutEffect;
diff --git a/components/affix/style/index.ts b/components/affix/style/index.ts
index c33c3176ee..f97731ae57 100644
--- a/components/affix/style/index.ts
+++ b/components/affix/style/index.ts
@@ -2,6 +2,8 @@ import type { CSSObject } from '../../_util/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+export interface ComponentToken {}
+
interface AffixToken extends FullToken<'Affix'> {
zIndexPopup: number;
}
diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
index 7589799b61..aa7e1a2ef5 100644
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@@ -4,6 +4,8 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { genPresetColor, resetComponent } from '../../style';
+export interface ComponentToken {}
+
interface BadgeToken extends FullToken<'Badge'> {
badgeFontHeight: number;
badgeZIndex: number | string;
diff --git a/components/breadcrumb/style/index.ts b/components/breadcrumb/style/index.ts
index 9d3b24d9cf..d19010fba7 100644
--- a/components/breadcrumb/style/index.ts
+++ b/components/breadcrumb/style/index.ts
@@ -3,6 +3,8 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { genFocusStyle, resetComponent } from '../../style';
+export interface ComponentToken {}
+
interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
breadcrumbBaseColor: string;
breadcrumbFontSize: number;
diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
index 1403382652..a97f14ad99 100644
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@@ -45,7 +45,11 @@ export default defineComponent({
break;
default:
// eslint-disable-next-line no-console
- devWarning(!size, 'Button.Group', 'Invalid prop `size`.');
+ devWarning(
+ !size || ['large', 'small', 'middle'].includes(size),
+ 'Button.Group',
+ 'Invalid prop `size`.',
+ );
}
return {
[`${prefixCls.value}`]: true,
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 32fdf9e21d..e71f278053 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -45,7 +45,7 @@ export default defineComponent({
// emits: ['click', 'mousedown'],
setup(props, { slots, attrs, emit, expose }) {
const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
- const [wrapSSR, hashId] = useStyle(prefixCls);
+ const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const groupSizeContext = GroupSizeContext.useInject();
const disabledContext = useInjectDisabled();
const mergedDisabled = computed(() => props.disabled ?? disabledContext.value);
@@ -95,6 +95,7 @@ export default defineComponent({
compactItemClassnames.value,
{
[hashId.value]: true,
+ [cssVarCls.value]: true,
[`${pre}`]: true,
[`${pre}-${shape}`]: shape !== 'default' && shape,
[`${pre}-${type}`]: type,
@@ -216,7 +217,7 @@ export default defineComponent({
);
if (href !== undefined) {
- return wrapSSR(
+ return wrapCSSVar(
<a {...buttonProps} href={href} target={target} ref={buttonNodeRef}>
{iconNode}
{kids}
@@ -239,7 +240,7 @@ export default defineComponent({
);
}
- return wrapSSR(buttonNode);
+ return wrapCSSVar(buttonNode);
};
},
});
diff --git a/components/button/style/compactCmp.ts b/components/button/style/compactCmp.ts
new file mode 100644
index 0000000000..1fb4dd9ef7
--- /dev/null
+++ b/components/button/style/compactCmp.ts
@@ -0,0 +1,72 @@
+// Style as inline component
+import type { ButtonToken } from './token';
+import { prepareComponentToken, prepareToken } from './token';
+import { genCompactItemStyle } from '../../style/compact-item';
+import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
+import type { GenerateStyle } from '../../_theme/internal';
+import { genSubStyleComponent } from '../../_theme/internal';
+import type { CSSObject } from '../../_util/_cssinjs';
+import { unit } from '../../_util/_cssinjs';
+
+const genButtonCompactStyle: GenerateStyle<ButtonToken, CSSObject> = token => {
+ const { componentCls, calc } = token;
+
+ return {
+ [componentCls]: {
+ // Special styles for Primary Button
+ [`&-compact-item${componentCls}-primary`]: {
+ [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
+ {
+ position: 'relative',
+
+ '&:before': {
+ position: 'absolute',
+ top: calc(token.lineWidth).mul(-1).equal(),
+ insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
+ display: 'inline-block',
+ width: token.lineWidth,
+ height: `calc(100% + ${unit(token.lineWidth)} * 2)`,
+ backgroundColor: token.colorPrimaryHover,
+ content: '""',
+ },
+ },
+ },
+ // Special styles for Primary Button
+ '&-compact-vertical-item': {
+ [`&${componentCls}-primary`]: {
+ [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
+ {
+ position: 'relative',
+
+ '&:before': {
+ position: 'absolute',
+ top: calc(token.lineWidth).mul(-1).equal(),
+ insetInlineStart: calc(token.lineWidth).mul(-1).equal(),
+ display: 'inline-block',
+ width: `calc(100% + ${unit(token.lineWidth)} * 2)`,
+ height: token.lineWidth,
+ backgroundColor: token.colorPrimaryHover,
+ content: '""',
+ },
+ },
+ },
+ },
+ },
+ };
+};
+
+// ============================== Export ==============================
+export default genSubStyleComponent(
+ ['Button', 'compact'],
+ token => {
+ const buttonToken = prepareToken(token);
+
+ return [
+ // Space Compact
+ genCompactItemStyle(buttonToken),
+ genCompactItemVerticalStyle(buttonToken),
+ genButtonCompactStyle(buttonToken),
+ ] as CSSObject[];
+ },
+ prepareComponentToken,
+);
diff --git a/components/button/style/group.ts b/components/button/style/group.ts
index 0bc094bc65..82d036eca0 100644
--- a/components/button/style/group.ts
+++ b/components/button/style/group.ts
@@ -1,5 +1,6 @@
-import type { ButtonToken } from '.';
-import type { GenerateStyle } from '../../theme/internal';
+import type { CSSObject } from '../../_util/_cssinjs';
+import type { ButtonToken } from './token';
+import type { GenerateStyle } from '../../_theme/internal';
const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
// Border
@@ -22,8 +23,8 @@ const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
},
});
-const genGroupStyle: GenerateStyle<ButtonToken> = token => {
- const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token;
+const genGroupStyle: GenerateStyle<ButtonToken, CSSObject> = token => {
+ const { componentCls, fontSize, lineWidth, groupBorderColor, colorErrorHover } = token;
return {
[`${componentCls}-group`]: [
@@ -41,7 +42,7 @@ const genGroupStyle: GenerateStyle<ButtonToken> = token => {
},
'&:not(:first-child)': {
- marginInlineStart: -lineWidth,
+ marginInlineStart: token.calc(lineWidth).mul(-1).equal(),
[`&, & > ${componentCls}`]: {
borderStartStartRadius: 0,
@@ -71,7 +72,7 @@ const genGroupStyle: GenerateStyle<ButtonToken> = token => {
},
// Border Color
- genButtonBorderStyle(`${componentCls}-primary`, colorPrimaryHover),
+ genButtonBorderStyle(`${componentCls}-primary`, groupBorderColor),
genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover),
],
};
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 20dfe069b6..84ebab32de 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -1,51 +1,59 @@
-import type { CSSInterpolation, CSSObject } from '../../_util/cssinjs';
-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';
-import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
+import type { CSSObject } from '../../_util/_cssinjs';
+import { unit } from '../../_util/_cssinjs';
-/** Component only token. Which will handle additional calculation of alias token */
-export interface ComponentToken {}
+import { genFocusStyle } from '../../style';
+import type { GenerateStyle } from '../../_theme/internal';
+import { genStyleHooks, mergeToken } from '../../_theme/internal';
+import genGroupStyle from './group';
+import type { ButtonToken, ComponentToken } from './token';
+import { prepareComponentToken, prepareToken } from './token';
-export interface ButtonToken extends FullToken<'Button'> {
- // FIXME: should be removed
- colorOutlineDefault: string;
- buttonPaddingHorizontal: number;
-}
+export type { ComponentToken };
// ============================== Shared ==============================
const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
- const { componentCls, iconCls } = token;
+ const { componentCls, iconCls, fontWeight } = token;
return {
[componentCls]: {
outline: 'none',
position: 'relative',
display: 'inline-block',
- fontWeight: 400,
+ fontWeight,
whiteSpace: 'nowrap',
textAlign: 'center',
backgroundImage: 'none',
- backgroundColor: 'transparent',
- border: `${token.lineWidth}px ${token.lineType} transparent`,
+ background: 'transparent',
+ border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
cursor: 'pointer',
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
userSelect: 'none',
touchAction: 'manipulation',
- lineHeight: token.lineHeight,
color: token.colorText,
+ '&:disabled > *': {
+ pointerEvents: 'none',
+ },
+
'> span': {
display: 'inline-block',
},
+ [`${componentCls}-icon`]: {
+ lineHeight: 0,
+ },
+
// Leave a space between icon and text.
[`> ${iconCls} + span, > span + ${iconCls}`]: {
marginInlineStart: token.marginXS,
},
+ [`&:not(${componentCls}-icon-only) > ${componentCls}-icon`]: {
+ [`&${componentCls}-loading-icon, &:not(:last-child)`]: {
+ marginInlineEnd: token.marginXS,
+ },
+ },
+
'> a': {
color: 'currentColor',
},
@@ -54,54 +62,29 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
...genFocusStyle(token),
},
+ [`&${componentCls}-two-chinese-chars::first-letter`]: {
+ letterSpacing: '0.34em',
+ },
+
+ [`&${componentCls}-two-chinese-chars > *:not(${iconCls})`]: {
+ marginInlineEnd: '-0.34em',
+ letterSpacing: '0.34em',
+ },
+
// make `btn-icon-only` not too narrow
[`&-icon-only${componentCls}-compact-item`]: {
flex: 'none',
},
- // Special styles for Primary Button
- [`&-compact-item${componentCls}-primary`]: {
- [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
- {
- position: 'relative',
-
- '&:before': {
- position: 'absolute',
- top: -token.lineWidth,
- insetInlineStart: -token.lineWidth,
- display: 'inline-block',
- width: token.lineWidth,
- height: `calc(100% + ${token.lineWidth * 2}px)`,
- backgroundColor: token.colorPrimaryHover,
- content: '""',
- },
- },
- },
- // Special styles for Primary Button
- '&-compact-vertical-item': {
- [`&${componentCls}-primary`]: {
- [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
- {
- position: 'relative',
-
- '&:before': {
- position: 'absolute',
- top: -token.lineWidth,
- insetInlineStart: -token.lineWidth,
- display: 'inline-block',
- width: `calc(100% + ${token.lineWidth * 2}px)`,
- height: token.lineWidth,
- backgroundColor: token.colorPrimaryHover,
- content: '""',
- },
- },
- },
- },
},
- };
+ } as CSSObject;
};
-const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
- '&:not(:disabled)': {
+const genHoverActiveButtonStyle = (
+ btnCls: string,
+ hoverStyle: CSSObject,
+ activeStyle: CSSObject,
+): CSSObject => ({
+ [`&:not(:disabled):not(${btnCls}-disabled)`]: {
'&:hover': hoverStyle,
'&:active': activeStyle,
},
@@ -117,21 +100,22 @@ const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
borderRadius: token.controlHeight,
- paddingInlineStart: token.controlHeight / 2,
- paddingInlineEnd: token.controlHeight / 2,
+ paddingInlineStart: token.calc(token.controlHeight).div(2).equal(),
+ paddingInlineEnd: token.calc(token.controlHeight).div(2).equal(),
});
// =============================== Type ===============================
const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
cursor: 'not-allowed',
- borderColor: token.colorBorder,
+ borderColor: token.borderColorDisabled,
color: token.colorTextDisabled,
- backgroundColor: token.colorBgContainerDisabled,
+ background: token.colorBgContainerDisabled,
boxShadow: 'none',
});
const genGhostButtonStyle = (
btnCls: string,
+ background: string,
textColor: string | false,
borderColor: string | false,
textColorDisabled: string | false,
@@ -141,17 +125,18 @@ const genGhostButtonStyle = (
): CSSObject => ({
[`&${btnCls}-background-ghost`]: {
color: textColor || undefined,
- backgroundColor: 'transparent',
+ background,
borderColor: borderColor || undefined,
boxShadow: 'none',
...genHoverActiveButtonStyle(
+ btnCls,
{
- backgroundColor: 'transparent',
+ background,
...hoverStyle,
},
{
- backgroundColor: 'transparent',
+ background,
...activeStyle,
},
),
@@ -165,7 +150,7 @@ const genGhostButtonStyle = (
});
const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
- '&:disabled': {
+ [`&:disabled, &${token.componentCls}-disabled`]: {
...genDisabledStyle(token),
},
});
@@ -175,7 +160,7 @@ const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
});
const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
- '&:disabled': {
+ [`&:disabled, &${token.componentCls}-disabled`]: {
cursor: 'not-allowed',
color: token.colorTextDisabled,
},
@@ -185,12 +170,14 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genSolidButtonStyle(token),
- backgroundColor: token.colorBgContainer,
- borderColor: token.colorBorder,
+ background: token.defaultBg,
+ borderColor: token.defaultBorderColor,
+ color: token.defaultColor,
- boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
+ boxShadow: token.defaultShadow,
...genHoverActiveButtonStyle(
+ token.componentCls,
{
color: token.colorPrimaryHover,
borderColor: token.colorPrimaryHover,
@@ -203,8 +190,9 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genGhostButtonStyle(
token.componentCls,
- token.colorBgContainer,
- token.colorBgContainer,
+ token.ghostBg,
+ token.defaultGhostColor,
+ token.defaultGhostBorderColor,
token.colorTextDisabled,
token.colorBorder,
),
@@ -214,6 +202,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
borderColor: token.colorError,
...genHoverActiveButtonStyle(
+ token.componentCls,
{
color: token.colorErrorHover,
borderColor: token.colorErrorBorderHover,
@@ -226,6 +215,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genGhostButtonStyle(
token.componentCls,
+ token.ghostBg,
token.colorError,
token.colorError,
token.colorTextDisabled,
@@ -239,24 +229,26 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genSolidButtonStyle(token),
- color: token.colorTextLightSolid,
- backgroundColor: token.colorPrimary,
+ color: token.primaryColor,
+ background: token.colorPrimary,
- boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
+ boxShadow: token.primaryShadow,
...genHoverActiveButtonStyle(
+ token.componentCls,
{
color: token.colorTextLightSolid,
- backgroundColor: token.colorPrimaryHover,
+ background: token.colorPrimaryHover,
},
{
color: token.colorTextLightSolid,
- backgroundColor: token.colorPrimaryActive,
+ background: token.colorPrimaryActive,
},
),
...genGhostButtonStyle(
token.componentCls,
+ token.ghostBg,
token.colorPrimary,
token.colorPrimary,
token.colorTextDisabled,
@@ -272,20 +264,23 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
),
[`&${token.componentCls}-dangerous`]: {
- backgroundColor: token.colorError,
- boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
+ background: token.colorError,
+ boxShadow: token.dangerShadow,
+ color: token.dangerColor,
...genHoverActiveButtonStyle(
+ token.componentCls,
{
- backgroundColor: token.colorErrorHover,
+ background: token.colorErrorHover,
},
{
- backgroundColor: token.colorErrorActive,
+ background: token.colorErrorActive,
},
),
...genGhostButtonStyle(
token.componentCls,
+ token.ghostBg,
token.colorError,
token.colorError,
token.colorTextDisabled,
@@ -314,8 +309,10 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
color: token.colorLink,
...genHoverActiveButtonStyle(
+ token.componentCls,
{
color: token.colorLinkHover,
+ background: token.linkHoverBg,
},
{
color: token.colorLinkActive,
@@ -328,6 +325,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
color: token.colorError,
...genHoverActiveButtonStyle(
+ token.componentCls,
{
color: token.colorErrorHover,
},
@@ -343,13 +341,14 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
// Type: Text
const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genHoverActiveButtonStyle(
+ token.componentCls,
{
color: token.colorText,
- backgroundColor: token.colorBgTextHover,
+ background: token.textHoverBg,
},
{
color: token.colorText,
- backgroundColor: token.colorBgTextActive,
+ background: token.colorBgTextActive,
},
),
@@ -360,26 +359,19 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
...genPureDisabledButtonStyle(token),
...genHoverActiveButtonStyle(
+ token.componentCls,
{
color: token.colorErrorHover,
- backgroundColor: token.colorErrorBg,
+ background: token.colorErrorBg,
},
{
color: token.colorErrorHover,
- backgroundColor: token.colorErrorBg,
+ background: token.colorErrorBg,
},
),
},
});
-// Href and Disabled
-const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
- ...genDisabledStyle(token),
- [`&${token.componentCls}:hover`]: {
- ...genDisabledStyle(token),
- },
-});
-
const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
const { componentCls } = token;
@@ -389,26 +381,30 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
[`${componentCls}-dashed`]: genDashedButtonStyle(token),
[`${componentCls}-link`]: genLinkButtonStyle(token),
[`${componentCls}-text`]: genTextButtonStyle(token),
- [`${componentCls}-disabled`]: genDisabledButtonStyle(token),
+ [`${componentCls}-ghost`]: genGhostButtonStyle(
+ token.componentCls,
+ token.ghostBg,
+ token.colorBgContainer,
+ token.colorBgContainer,
+ token.colorTextDisabled,
+ token.colorBorder,
+ ),
};
};
// =============================== Size ===============================
-const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSSInterpolation => {
+const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = '') => {
const {
componentCls,
- iconCls,
controlHeight,
fontSize,
lineHeight,
- lineWidth,
borderRadius,
buttonPaddingHorizontal,
+ iconCls,
+ buttonPaddingVertical,
} = token;
- const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth);
- const paddingHorizontal = buttonPaddingHorizontal - lineWidth;
-
const iconOnlyCls = `${componentCls}-icon-only`;
return [
@@ -416,8 +412,9 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
{
[`${componentCls}${sizePrefixCls}`]: {
fontSize,
+ lineHeight,
height: controlHeight,
- padding: `${paddingVertical}px ${paddingHorizontal}px`,
+ padding: `${unit(buttonPaddingVertical!)} ${unit(buttonPaddingHorizontal!)}`,
borderRadius,
[`&${iconOnlyCls}`]: {
@@ -427,8 +424,8 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
[`&${componentCls}-round`]: {
width: 'auto',
},
- '> span': {
- transform: 'scale(1.143)', // 14px -> 16px
+ [iconCls]: {
+ fontSize: token.buttonIconOnlyFontSize,
},
},
@@ -441,10 +438,6 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
[`${componentCls}-loading-icon`]: {
transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
},
-
- [`&:not(${iconOnlyCls}) ${componentCls}-loading-icon > ${iconCls}`]: {
- marginInlineEnd: token.marginXS,
- },
},
},
@@ -458,14 +451,24 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
];
};
-const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token);
+const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token =>
+ genSizeButtonStyle(
+ mergeToken<ButtonToken>(token, {
+ fontSize: token.contentFontSize,
+ lineHeight: token.contentLineHeight,
+ }),
+ );
const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
const smallToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightSM,
+ fontSize: token.contentFontSizeSM,
+ lineHeight: token.contentLineHeightSM,
padding: token.paddingXS,
- buttonPaddingHorizontal: 8, // Fixed padding
+ buttonPaddingHorizontal: token.paddingInlineSM,
+ buttonPaddingVertical: token.paddingBlockSM,
borderRadius: token.borderRadiusSM,
+ buttonIconOnlyFontSize: token.onlyIconSizeSM,
});
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`);
@@ -474,8 +477,12 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
const largeToken = mergeToken<ButtonToken>(token, {
controlHeight: token.controlHeightLG,
- fontSize: token.fontSizeLG,
+ fontSize: token.contentFontSizeLG,
+ lineHeight: token.contentLineHeightLG,
+ buttonPaddingHorizontal: token.paddingInlineLG,
+ buttonPaddingVertical: token.paddingBlockLG,
borderRadius: token.borderRadiusLG,
+ buttonIconOnlyFontSize: token.onlyIconSizeLG,
});
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`);
@@ -493,33 +500,37 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
};
// ============================== Export ==============================
-export default genComponentStyleHook('Button', token => {
- const { controlTmpOutline, paddingContentHorizontal } = token;
- const buttonToken = mergeToken<ButtonToken>(token, {
- colorOutlineDefault: controlTmpOutline,
- buttonPaddingHorizontal: paddingContentHorizontal,
- });
+export default genStyleHooks(
+ 'Button',
+ token => {
+ const buttonToken = prepareToken(token);
- return [
- // Shared
- genSharedButtonStyle(buttonToken),
+ return [
+ // Shared
+ genSharedButtonStyle(buttonToken),
- // Size
- genSizeSmallButtonStyle(buttonToken),
- genSizeBaseButtonStyle(buttonToken),
- genSizeLargeButtonStyle(buttonToken),
+ // Size
+ genSizeSmallButtonStyle(buttonToken),
+ genSizeBaseButtonStyle(buttonToken),
+ genSizeLargeButtonStyle(buttonToken),
- // Block
- genBlockButtonStyle(buttonToken),
+ // Block
+ genBlockButtonStyle(buttonToken),
- // Group (type, ghost, danger, disabled, loading)
- genTypeButtonStyle(buttonToken),
+ // Group (type, ghost, danger, loading)
+ genTypeButtonStyle(buttonToken),
- // Button Group
- genGroupStyle(buttonToken),
-
- // Space Compact
- genCompactItemStyle(token, { focus: false }),
- genCompactItemVerticalStyle(token),
- ];
-});
+ // Button Group
+ genGroupStyle(buttonToken),
+ ];
+ },
+ prepareComponentToken,
+ {
+ unitless: {
+ fontWeight: true,
+ contentLineHeight: true,
+ contentLineHeightSM: true,
+ contentLineHeightLG: true,
+ },
+ },
+);
diff --git a/components/button/style/token.ts b/components/button/style/token.ts
new file mode 100644
index 0000000000..ecf31a2f91
--- /dev/null
+++ b/components/button/style/token.ts
@@ -0,0 +1,234 @@
+import type { CSSProperties } from 'vue';
+import type { FullToken, GetDefaultToken } from '../../_theme/internal';
+import { getLineHeight, mergeToken } from '../../_theme/internal';
+import type { GenStyleFn } from '../../_theme/util/genComponentStyleHook';
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+ /**
+ * @desc 文字字重
+ * @descEN Font weight of text
+ */
+ fontWeight: CSSProperties['fontWeight'];
+ /**
+ * @desc 默认按钮阴影
+ * @descEN Shadow of default button
+ */
+ defaultShadow: string;
+ /**
+ * @desc 主要按钮阴影
+ * @descEN Shadow of primary button
+ */
+ primaryShadow: string;
+ /**
+ * @desc 危险按钮阴影
+ * @descEN Shadow of danger button
+ */
+ dangerShadow: string;
+ /**
+ * @desc 主要按钮文本颜色
+ * @descEN Text color of primary button
+ */
+ primaryColor: string;
+ /**
+ * @desc 默认按钮文本颜色
+ * @descEN Text color of default button
+ */
+ defaultColor: string;
+ /**
+ * @desc 默认按钮背景色
+ * @descEN Background color of default button
+ */
+ defaultBg: string;
+ /**
+ * @desc 默认按钮边框颜色
+ * @descEN Border color of default button
+ */
+ defaultBorderColor: string;
+ /**
+ * @desc 危险按钮文本颜色
+ * @descEN Text color of danger button
+ */
+ dangerColor: string;
+ /**
+ * @desc 禁用状态边框颜色
+ * @descEN Border color of disabled button
+ */
+ borderColorDisabled: string;
+ /**
+ * @desc 默认幽灵按钮文本颜色
+ * @descEN Text color of default ghost button
+ */
+ defaultGhostColor: string;
+ /**
+ * @desc 幽灵按钮背景色
+ * @descEN Background color of ghost button
+ */
+ ghostBg: string;
+ /**
+ * @desc 默认幽灵按钮边框颜色
+ * @descEN Border color of default ghost button
+ */
+ defaultGhostBorderColor: string;
+ /**
+ * @desc 按钮横向内间距
+ * @descEN Horizontal padding of button
+ */
+ paddingInline: CSSProperties['paddingInline'];
+ /**
+ * @desc 大号按钮横向内间距
+ * @descEN Horizontal padding of large button
+ */
+ paddingInlineLG: CSSProperties['paddingInline'];
+ /**
+ * @desc 小号按钮横向内间距
+ * @descEN Horizontal padding of small button
+ */
+ paddingInlineSM: CSSProperties['paddingInline'];
+ /**
+ * @desc 按钮横向内间距
+ * @descEN Horizontal padding of button
+ */
+ paddingBlock: CSSProperties['paddingInline'];
+ /**
+ * @desc 大号按钮横向内间距
+ * @descEN Horizontal padding of large button
+ */
+ paddingBlockLG: CSSProperties['paddingInline'];
+ /**
+ * @desc 小号按钮横向内间距
+ * @descEN Horizontal padding of small button
+ */
+ paddingBlockSM: CSSProperties['paddingInline'];
+ /**
+ * @desc 只有图标的按钮图标尺寸
+ * @descEN Icon size of button which only contains icon
+ */
+ onlyIconSize: number;
+ /**
+ * @desc 大号只有图标的按钮图标尺寸
+ * @descEN Icon size of large button which only contains icon
+ */
+ onlyIconSizeLG: number;
+ /**
+ * @desc 小号只有图标的按钮图标尺寸
+ * @descEN Icon size of small button which only contains icon
+ */
+ onlyIconSizeSM: number;
+ /**
+ * @desc 按钮组边框颜色
+ * @descEN Border color of button group
+ */
+ groupBorderColor: string;
+ /**
+ * @desc 链接按钮悬浮态背景色
+ * @descEN Background color of link button when hover
+ */
+ linkHoverBg: string;
+ /**
+ * @desc 文本按钮悬浮态背景色
+ * @descEN Background color of text button when hover
+ */
+ textHoverBg: string;
+ /**
+ * @desc 按钮内容字体大小
+ * @descEN Font size of button content
+ */
+ contentFontSize: number;
+ /**
+ * @desc 大号按钮内容字体大小
+ * @descEN Font size of large button content
+ */
+ contentFontSizeLG: number;
+ /**
+ * @desc 小号按钮内容字体大小
+ * @descEN Font size of small button content
+ */
+ contentFontSizeSM: number;
+ /**
+ * @desc 按钮内容字体行高
+ * @descEN Line height of button content
+ */
+ contentLineHeight: number;
+ /**
+ * @desc 大号按钮内容字体行高
+ * @descEN Line height of large button content
+ */
+ contentLineHeightLG: number;
+ /**
+ * @desc 小号按钮内容字体行高
+ * @descEN Line height of small button content
+ */
+ contentLineHeightSM: number;
+}
+
+export interface ButtonToken extends FullToken<'Button'> {
+ buttonPaddingHorizontal: CSSProperties['paddingInline'];
+ buttonPaddingVertical: CSSProperties['paddingBlock'];
+ buttonIconOnlyFontSize: number;
+}
+
+export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = token => {
+ const { paddingInline, onlyIconSize, paddingBlock } = token;
+
+ const buttonToken = mergeToken<ButtonToken>(token, {
+ buttonPaddingHorizontal: paddingInline,
+ buttonPaddingVertical: paddingBlock,
+ buttonIconOnlyFontSize: onlyIconSize,
+ });
+
+ return buttonToken;
+};
+
+export const prepareComponentToken: GetDefaultToken<'Button'> = token => {
+ const contentFontSize = token.contentFontSize ?? token.fontSize;
+ const contentFontSizeSM = token.contentFontSizeSM ?? token.fontSize;
+ const contentFontSizeLG = token.contentFontSizeLG ?? token.fontSizeLG;
+ const contentLineHeight = token.contentLineHeight ?? getLineHeight(contentFontSize);
+ const contentLineHeightSM = token.contentLineHeightSM ?? getLineHeight(contentFontSizeSM);
+ const contentLineHeightLG = token.contentLineHeightLG ?? getLineHeight(contentFontSizeLG);
+
+ return {
+ fontWeight: 400,
+ defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
+ primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
+ dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
+ primaryColor: token.colorTextLightSolid,
+ dangerColor: token.colorTextLightSolid,
+ borderColorDisabled: token.colorBorder,
+ defaultGhostColor: token.colorBgContainer,
+ ghostBg: 'transparent',
+ defaultGhostBorderColor: token.colorBgContainer,
+ paddingInline: token.paddingContentHorizontal - token.lineWidth,
+ paddingInlineLG: token.paddingContentHorizontal - token.lineWidth,
+ paddingInlineSM: 8 - token.lineWidth,
+ onlyIconSize: token.fontSizeLG,
+ onlyIconSizeSM: token.fontSizeLG - 2,
+ onlyIconSizeLG: token.fontSizeLG + 2,
+ groupBorderColor: token.colorPrimaryHover,
+ linkHoverBg: 'transparent',
+ textHoverBg: token.colorBgTextHover,
+ defaultColor: token.colorText,
+ defaultBg: token.colorBgContainer,
+ defaultBorderColor: token.colorBorder,
+ defaultBorderColorDisabled: token.colorBorder,
+ contentFontSize,
+ contentFontSizeSM,
+ contentFontSizeLG,
+ contentLineHeight,
+ contentLineHeightSM,
+ contentLineHeightLG,
+ paddingBlock: Math.max(
+ (token.controlHeight - contentFontSize * contentLineHeight) / 2 - token.lineWidth,
+ 0,
+ ),
+ paddingBlockSM: Math.max(
+ (token.controlHeightSM - contentFontSizeSM * contentLineHeightSM) / 2 - token.lineWidth,
+ 0,
+ ),
+ paddingBlockLG: Math.max(
+ (token.controlHeightLG - contentFontSizeLG * contentLineHeightLG) / 2 - token.lineWidth,
+ 0,
+ ),
+ };
+};
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index f219075952..ea81b74898 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -5,9 +5,9 @@ import type { RequiredMark } from '../form/Form';
import type { RenderEmptyHandler } from './renderEmpty';
import type { TransformCellTextProps } from '../table/interface';
import type { Locale } from '../locale-provider';
-import type { DerivativeFunc } from '../_util/cssinjs';
-import type { AliasToken, SeedToken } from '../theme/internal';
-import type { MapToken, OverrideToken } from '../theme/interface';
+import type { DerivativeFunc } from '../_util/_cssinjs';
+import type { AliasToken, SeedToken } from '../_theme/internal';
+import type { MapToken, OverrideToken } from '../_theme/interface';
import type { VueNode } from '../_util/type';
import { objectType } from '../_util/type';
@@ -57,6 +57,18 @@ export interface ThemeConfig {
algorithm?: MappingAlgorithm | MappingAlgorithm[];
hashed?: boolean;
inherit?: boolean;
+ cssVar?:
+ | {
+ /**
+ * Prefix for css variable, default to `antd`.
+ */
+ prefix?: string;
+ /**
+ * Unique key for theme, should be set manually < react@18.
+ */
+ key?: string;
+ }
+ | boolean;
}
export const configProviderProps = () => ({
diff --git a/components/config-provider/hooks/useCssVarCls.ts b/components/config-provider/hooks/useCssVarCls.ts
new file mode 100644
index 0000000000..4ebf486b29
--- /dev/null
+++ b/components/config-provider/hooks/useCssVarCls.ts
@@ -0,0 +1,15 @@
+import { useToken } from '../../_theme/internal';
+import type { Ref } from 'vue';
+
+/**
+ * This hook is only for cssVar to add root className for components.
+ * If root ClassName is needed, this hook could be refactored with `-root`
+ * @param prefixCls
+ */
+const useCSSVarCls = (prefixCls: Ref<string>) => {
+ const [, , , , cssVar] = useToken();
+
+ return cssVar.value ? `${prefixCls.value}-css-var` : '';
+};
+
+export default useCSSVarCls;
diff --git a/components/config-provider/hooks/useSize.ts b/components/config-provider/hooks/useSize.ts
new file mode 100644
index 0000000000..85fac8d982
--- /dev/null
+++ b/components/config-provider/hooks/useSize.ts
@@ -0,0 +1,32 @@
+import type { SizeType } from '../SizeContext';
+import { useInjectSize } from '../SizeContext';
+import type { Ref } from 'vue';
+import { computed, shallowRef, watch } from 'vue';
+
+const useSize = <T>(customSize?: T | ((ctxSize: SizeType) => T)): Ref<T> => {
+ const size = useInjectSize();
+
+ const mergedSize = shallowRef(null);
+
+ watch(
+ computed(() => {
+ return [customSize, size.value];
+ }),
+ () => {
+ if (!customSize) {
+ mergedSize.value = size.value as T;
+ }
+ if (typeof customSize === 'string') {
+ mergedSize.value = customSize ?? (size.value as T);
+ }
+ if (customSize instanceof Function) {
+ mergedSize.value = customSize(size.value) as T;
+ }
+ },
+ { immediate: true },
+ );
+
+ return mergedSize;
+};
+
+export default useSize;
diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts
index 0ed451193c..1a8c8d8f69 100644
--- a/components/config-provider/hooks/useTheme.ts
+++ b/components/config-provider/hooks/useTheme.ts
@@ -1,7 +1,9 @@
import type { ThemeConfig } from '../context';
-import { defaultConfig } from '../../theme/internal';
+import { defaultConfig } from '../../_theme/internal';
import type { Ref } from 'vue';
import { computed } from 'vue';
+import useThemeKey from './useThemeKey';
+import devWarning from '../../vc-util/warning';
export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<ThemeConfig>) {
const themeConfig = computed(() => theme?.value || {});
@@ -9,6 +11,20 @@ export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<The
themeConfig.value.inherit === false || !parentTheme?.value ? defaultConfig : parentTheme.value,
);
+ const themeKey = useThemeKey();
+
+ if (process.env.NODE_ENV !== 'production') {
+ const cssVarEnabled = themeConfig.value.cssVar || parentThemeConfig.value.cssVar;
+ const validKey = !!(
+ (typeof themeConfig.value.cssVar === 'object' && themeConfig.value.cssVar?.key) ||
+ themeKey
+ );
+ devWarning(
+ !cssVarEnabled || validKey,
+ '[Ant Design Vue ConfigProvider] Missing key in `cssVar` config. Please set `cssVar.key` manually in each ConfigProvider inside `cssVar` enabled ConfigProvider.',
+ );
+ }
+
const mergedTheme = computed(() => {
if (!theme?.value) {
return parentTheme?.value;
@@ -26,6 +42,16 @@ export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<The
} as any;
});
+ const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
+ const mergedCssVar = (themeConfig.value.cssVar ?? parentThemeConfig.value.cssVar) && {
+ prefix: 'ant', // Default to ant
+ ...(typeof parentThemeConfig.value.cssVar === 'object' ? parentThemeConfig.value.cssVar : {}),
+ ...(typeof themeConfig.value.cssVar === 'object' ? themeConfig.value.cssVar : {}),
+ key:
+ (typeof themeConfig.value.cssVar === 'object' && themeConfig.value.cssVar?.key) ||
+ cssVarKey,
+ };
+
// Base token
return {
...parentThemeConfig.value,
@@ -36,6 +62,7 @@ export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<The
...themeConfig.value.token,
},
components: mergedComponents,
+ cssVar: mergedCssVar,
};
});
diff --git a/components/config-provider/hooks/useThemeKey.ts b/components/config-provider/hooks/useThemeKey.ts
new file mode 100644
index 0000000000..7469df6971
--- /dev/null
+++ b/components/config-provider/hooks/useThemeKey.ts
@@ -0,0 +1,14 @@
+import { getCurrentInstance } from 'vue';
+import _ from 'lodash';
+
+const useThemeKey = () => {
+ const instance = getCurrentInstance();
+
+ if (!instance) {
+ return _.uniqueId() + '';
+ }
+
+ return instance.uid + '';
+};
+
+export default useThemeKey;
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 036238ccb3..68198c2e71 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -15,8 +15,8 @@ import defaultLocale from '../locale/en_US';
import type { ValidateMessages } from '../form/interface';
import useStyle from './style';
import useTheme from './hooks/useTheme';
-import defaultSeedToken from '../theme/themes/seed';
-import type { ConfigProviderInnerProps, ConfigProviderProps, Theme } from './context';
+import defaultSeedToken from '../_theme/themes/seed';
+import type { ConfigProviderInnerProps, ConfigProviderProps, Theme, ThemeConfig } from './context';
import {
useConfigContextProvider,
useConfigContextInject,
@@ -26,8 +26,8 @@ import {
} from './context';
import { useProviderSize } from './SizeContext';
import { useProviderDisabled } from './DisabledContext';
-import { createTheme } from '../_util/cssinjs';
-import { DesignTokenProvider } from '../theme/internal';
+import { createTheme } from '../_util/_cssinjs';
+import { defaultTheme, DesignTokenProvider } from '../_theme/context';
export type {
ConfigProviderProps,
@@ -227,19 +227,47 @@ const ConfigProvider = defineComponent({
// ================================ Dynamic theme ================================
const memoTheme = computed(() => {
- const { algorithm, token, ...rest } = mergedTheme.value || {};
+ const { algorithm, token, components, cssVar, ...rest } = mergedTheme.value || {};
const themeObj =
algorithm && (!Array.isArray(algorithm) || algorithm.length > 0)
? createTheme(algorithm)
- : undefined;
+ : defaultTheme;
+
+ const parsedComponents: any = {};
+ Object.entries(components || {}).forEach(([componentName, componentToken]) => {
+ const parsedToken: typeof componentToken & { theme?: typeof defaultTheme } = {
+ ...componentToken,
+ };
+ if ('algorithm' in parsedToken) {
+ if (parsedToken.algorithm === true) {
+ parsedToken.theme = themeObj;
+ } else if (
+ Array.isArray(parsedToken.algorithm) ||
+ typeof parsedToken.algorithm === 'function'
+ ) {
+ parsedToken.theme = createTheme(parsedToken.algorithm as any);
+ }
+ delete parsedToken.algorithm;
+ }
+ parsedComponents[componentName] = parsedToken;
+ });
+
+ const mergedToken = {
+ ...defaultSeedToken,
+ ...token,
+ };
+
return {
...rest,
theme: themeObj,
- token: {
- ...defaultSeedToken,
- ...token,
+ token: mergedToken,
+ components: parsedComponents,
+ override: {
+ override: mergedToken,
+ ...parsedComponents,
},
+ cssVar: cssVar as Exclude<ThemeConfig['cssVar'], boolean>,
};
});
const validateMessagesRef = computed(() => {
diff --git a/components/config-provider/style/index.ts b/components/config-provider/style/index.ts
index 77ed478a06..762e6e4950 100644
--- a/components/config-provider/style/index.ts
+++ b/components/config-provider/style/index.ts
@@ -1,6 +1,7 @@
-import { useStyleRegister } from '../../_util/cssinjs';
+import type { CSSObject } from '../../_util/_cssinjs';
+import { useStyleRegister } from '../../_util/_cssinjs';
import { resetIcon } from '../../style';
-import { useToken } from '../../theme/internal';
+import { useToken } from '../../_theme/internal';
import { computed, Ref } from 'vue';
const useStyle = (iconPrefixCls: Ref<string>) => {
@@ -13,16 +14,17 @@ const useStyle = (iconPrefixCls: Ref<string>) => {
hashId: '',
path: ['ant-design-icons', iconPrefixCls.value],
})),
- () => [
- {
- [`.${iconPrefixCls.value}`]: {
- ...resetIcon(),
- [`.${iconPrefixCls.value} .${iconPrefixCls.value}-icon`]: {
- display: 'block',
+ () =>
+ [
+ {
+ [`.${iconPrefixCls.value}`]: {
+ ...resetIcon(),
+ [`.${iconPrefixCls.value} .${iconPrefixCls.value}-icon`]: {
+ display: 'block',
+ },
},
},
- },
- ],
+ ] as CSSObject[],
);
};
diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts
index 4e92852fd3..5675e67362 100644
--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@@ -22,6 +22,8 @@ import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
import { resetComponent, roundedArrow, textEllipsis } from '../../style';
import { genCompactItemStyle } from '../../style/compact-item';
+export interface ComponentToken {}
+
export interface ComponentToken {
presetsWidth: number;
presetsMaxWidth: number;
diff --git a/components/descriptions/style/index.ts b/components/descriptions/style/index.ts
index 037edb550c..c4289b7de9 100644
--- a/components/descriptions/style/index.ts
+++ b/components/descriptions/style/index.ts
@@ -3,6 +3,8 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent, textEllipsis } from '../../style';
+export interface ComponentToken {}
+
interface DescriptionsToken extends FullToken<'Descriptions'> {
descriptionsTitleMarginBottom: number;
descriptionsExtraColor: string;
diff --git a/components/form/style/index.ts b/components/form/style/index.ts
index dad4aa62f0..394a3db899 100644
--- a/components/form/style/index.ts
+++ b/components/form/style/index.ts
@@ -5,6 +5,8 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent } from '../../style';
import genFormValidateMotionStyle from './explain';
+export interface ComponentToken {}
+
export interface FormToken extends FullToken<'Form'> {
formItemCls: string;
rootPrefixCls: string;
diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts
index 137b50251f..895b5b01cf 100644
--- a/components/grid/style/index.ts
+++ b/components/grid/style/index.ts
@@ -2,6 +2,8 @@ import type { CSSObject } from '../../_util/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+export interface ComponentToken {}
+
interface GridRowToken extends FullToken<'Grid'> {}
interface GridColToken extends FullToken<'Grid'> {
diff --git a/components/input/style/index.ts b/components/input/style/index.ts
index 7653f78707..dec232d664 100644
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -5,6 +5,8 @@ import type { GlobalToken } from '../../theme/interface';
import { clearFix, resetComponent } from '../../style';
import { genCompactItemStyle } from '../../style/compact-item';
+export interface ComponentToken {}
+
export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
inputAffixPadding: number;
inputPaddingVertical: number;
diff --git a/components/page-header/style/index.ts b/components/page-header/style/index.ts
index 2ed3537790..99717577df 100644
--- a/components/page-header/style/index.ts
+++ b/components/page-header/style/index.ts
@@ -4,6 +4,8 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent, textEllipsis } from '../../style';
import { operationUnit } from '../../style';
+export interface ComponentToken {}
+
interface PageHeaderToken extends FullToken<'PageHeader'> {
pageHeaderPadding: number;
pageHeaderPaddingVertical: number;
diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx
index 9f94de9abf..56d6201343 100644
--- a/components/pagination/style/index.tsx
+++ b/components/pagination/style/index.tsx
@@ -9,6 +9,8 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
+export interface ComponentToken {}
+
interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
paginationItemSize: number;
paginationFontFamily: string;
diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx
index d70e31b0c2..b180819264 100644
--- a/components/statistic/style/index.tsx
+++ b/components/statistic/style/index.tsx
@@ -3,6 +3,8 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent } from '../../style';
+export interface ComponentToken {}
+
interface StatisticToken extends FullToken<'Statistic'> {
statisticTitleFontSize: number;
statisticContentFontSize: number;
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 2bc6e5a810..09a2cf4610 100644
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -98,7 +98,7 @@ const Switch = defineComponent({
);
const { prefixCls, direction, size } = useConfigInject('switch', props);
- const [wrapSSR, hashId] = useStyle(prefixCls);
+ const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const refSwitchNode = ref();
const focus = () => {
refSwitchNode.value?.focus();
@@ -159,10 +159,11 @@ const Switch = defineComponent({
[prefixCls.value]: true,
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
[hashId.value]: true,
+ [cssVarCls.value]: true,
}));
return () =>
- wrapSSR(
+ wrapCSSVar(
<Wave>
<button
{...omit(props, [
diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts
index 1eae4a8539..d016f21e63 100644
--- a/components/switch/style/index.ts
+++ b/components/switch/style/index.ts
@@ -1,107 +1,167 @@
-import type { CSSObject } from '../../_util/cssinjs';
+import type { CSSObject } from '../../_util/_cssinjs';
+import { unit } from '../../_util/_cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { genFocusStyle, resetComponent } from '../../style';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../_theme/internal';
+import { genStyleHooks, mergeToken } from '../../_theme/internal';
+
+export interface ComponentToken {
+ /**
+ * @desc 开关高度
+ * @descEN Height of Switch
+ */
+ trackHeight: number;
+ /**
+ * @desc 小号开关高度
+ * @descEN Height of small Switch
+ */
+ trackHeightSM: number;
+ /**
+ * @desc 开关最小宽度
+ * @descEN Minimum width of Switch
+ */
+ trackMinWidth: number;
+ /**
+ * @desc 小号开关最小宽度
+ * @descEN Minimum width of small Switch
+ */
+ trackMinWidthSM: number;
+ /**
+ * @desc 开关内边距
+ * @descEN Padding of Switch
+ */
+ trackPadding: number;
+ /**
+ * @desc 开关把手背景色
+ * @descEN Background color of Switch handle
+ */
+ handleBg: string;
+ /**
+ * @desc 开关把手阴影
+ * @descEN Shadow of Switch handle
+ */
+ handleShadow: string;
+ /**
+ * @desc 开关把手大小
+ * @descEN Size of Switch handle
+ */
+ handleSize: number;
+ /**
+ * @desc 小号开关把手大小
+ * @descEN Size of small Switch handle
+ */
+ handleSizeSM: number;
+ /**
+ * @desc 内容区域最小边距
+ * @descEN Minimum margin of content area
+ */
+ innerMinMargin: number;
+ /**
+ * @desc 内容区域最大边距
+ * @descEN Maximum margin of content area
+ */
+ innerMaxMargin: number;
+ /**
+ * @desc 小号开关内容区域最小边距
+ * @descEN Minimum margin of content area of small Switch
+ */
+ innerMinMarginSM: number;
+ /**
+ * @desc 小号开关内容区域最大边距
+ * @descEN Maximum margin of content area of small Switch
+ */
+ innerMaxMarginSM: number;
+}
interface SwitchToken extends FullToken<'Switch'> {
- switchMinWidth: number;
- switchHeight: number;
switchDuration: string;
switchColor: string;
switchDisabledOpacity: number;
- switchInnerMarginMin: number;
- switchInnerMarginMax: number;
- switchPadding: number;
- switchPinSize: number;
- switchBg: string;
- switchMinWidthSM: number;
- switchHeightSM: number;
- switchInnerMarginMinSM: number;
- switchInnerMarginMaxSM: number;
- switchPinSizeSM: number;
- switchHandleShadow: string;
- switchLoadingIconSize: number;
+ switchLoadingIconSize: number | string;
switchLoadingIconColor: string;
switchHandleActiveInset: string;
}
const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
- const { componentCls } = token;
+ const {
+ componentCls,
+ trackHeightSM,
+ trackPadding,
+ trackMinWidthSM,
+ innerMinMarginSM,
+ innerMaxMarginSM,
+ handleSizeSM,
+ calc,
+ } = token;
const switchInnerCls = `${componentCls}-inner`;
+ const trackPaddingCalc = unit(calc(handleSizeSM).add(calc(trackPadding).mul(2)).equal());
+ const innerMaxMarginCalc = unit(calc(innerMaxMarginSM).mul(2).equal());
+
return {
[componentCls]: {
[`&${componentCls}-small`]: {
- minWidth: token.switchMinWidthSM,
- height: token.switchHeightSM,
- lineHeight: `${token.switchHeightSM}px`,
+ minWidth: trackMinWidthSM,
+ height: trackHeightSM,
+ lineHeight: unit(trackHeightSM),
[`${componentCls}-inner`]: {
- paddingInlineStart: token.switchInnerMarginMaxSM,
- paddingInlineEnd: token.switchInnerMarginMinSM,
+ paddingInlineStart: innerMaxMarginSM,
+ paddingInlineEnd: innerMinMarginSM,
[`${switchInnerCls}-checked`]: {
- marginInlineStart: `calc(-100% + ${
- token.switchPinSizeSM + token.switchPadding * 2
- }px - ${token.switchInnerMarginMaxSM * 2}px)`,
- marginInlineEnd: `calc(100% - ${token.switchPinSizeSM + token.switchPadding * 2}px + ${
- token.switchInnerMarginMaxSM * 2
- }px)`,
+ marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
+ marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
},
[`${switchInnerCls}-unchecked`]: {
- marginTop: -token.switchHeightSM,
+ marginTop: calc(trackHeightSM).mul(-1).equal(),
marginInlineStart: 0,
marginInlineEnd: 0,
},
},
[`${componentCls}-handle`]: {
- width: token.switchPinSizeSM,
- height: token.switchPinSizeSM,
+ width: handleSizeSM,
+ height: handleSizeSM,
},
[`${componentCls}-loading-icon`]: {
- top: (token.switchPinSizeSM - token.switchLoadingIconSize) / 2,
+ top: calc(calc(handleSizeSM).sub(token.switchLoadingIconSize)).div(2).equal(),
fontSize: token.switchLoadingIconSize,
},
[`&${componentCls}-checked`]: {
[`${componentCls}-inner`]: {
- paddingInlineStart: token.switchInnerMarginMinSM,
- paddingInlineEnd: token.switchInnerMarginMaxSM,
+ paddingInlineStart: innerMinMarginSM,
+ paddingInlineEnd: innerMaxMarginSM,
[`${switchInnerCls}-checked`]: {
marginInlineStart: 0,
marginInlineEnd: 0,
},
[`${switchInnerCls}-unchecked`]: {
- marginInlineStart: `calc(100% - ${
- token.switchPinSizeSM + token.switchPadding * 2
- }px + ${token.switchInnerMarginMaxSM * 2}px)`,
- marginInlineEnd: `calc(-100% + ${
- token.switchPinSizeSM + token.switchPadding * 2
- }px - ${token.switchInnerMarginMaxSM * 2}px)`,
+ marginInlineStart: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
+ marginInlineEnd: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
},
},
[`${componentCls}-handle`]: {
- insetInlineStart: `calc(100% - ${token.switchPinSizeSM + token.switchPadding}px)`,
+ insetInlineStart: `calc(100% - ${unit(calc(handleSizeSM).add(trackPadding).equal())})`,
},
},
[`&:not(${componentCls}-disabled):active`]: {
[`&:not(${componentCls}-checked) ${switchInnerCls}`]: {
[`${switchInnerCls}-unchecked`]: {
- marginInlineStart: token.marginXXS / 2,
- marginInlineEnd: -token.marginXXS / 2,
+ marginInlineStart: calc(token.marginXXS).div(2).equal(),
+ marginInlineEnd: calc(token.marginXXS).mul(-1).div(2).equal(),
},
},
[`&${componentCls}-checked ${switchInnerCls}`]: {
[`${switchInnerCls}-checked`]: {
- marginInlineStart: -token.marginXXS / 2,
- marginInlineEnd: token.marginXXS / 2,
+ marginInlineStart: calc(token.marginXXS).mul(-1).div(2).equal(),
+ marginInlineEnd: calc(token.marginXXS).div(2).equal(),
},
},
},
@@ -111,13 +171,13 @@ const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
};
const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
- const { componentCls } = token;
+ const { componentCls, handleSize, calc } = token;
return {
[componentCls]: {
[`${componentCls}-loading-icon${token.iconCls}`]: {
position: 'relative',
- top: (token.switchPinSize - token.fontSize) / 2,
+ top: calc(calc(handleSize).sub(token.fontSize)).div(2).equal(),
color: token.switchLoadingIconColor,
verticalAlign: 'top',
},
@@ -130,17 +190,17 @@ const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
};
const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
- const { componentCls } = token;
+ const { componentCls, trackPadding, handleBg, handleShadow, handleSize, calc } = token;
const switchHandleCls = `${componentCls}-handle`;
return {
[componentCls]: {
[switchHandleCls]: {
position: 'absolute',
- top: token.switchPadding,
- insetInlineStart: token.switchPadding,
- width: token.switchPinSize,
- height: token.switchPinSize,
+ top: trackPadding,
+ insetInlineStart: trackPadding,
+ width: handleSize,
+ height: handleSize,
transition: `all ${token.switchDuration} ease-in-out`,
'&::before': {
@@ -149,16 +209,16 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
insetInlineEnd: 0,
bottom: 0,
insetInlineStart: 0,
- backgroundColor: token.colorWhite,
- borderRadius: token.switchPinSize / 2,
- boxShadow: token.switchHandleShadow,
+ backgroundColor: handleBg,
+ borderRadius: calc(handleSize).div(2).equal(),
+ boxShadow: handleShadow,
transition: `all ${token.switchDuration} ease-in-out`,
content: '""',
},
},
[`&${componentCls}-checked ${switchHandleCls}`]: {
- insetInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding}px)`,
+ insetInlineStart: `calc(100% - ${unit(calc(handleSize).add(trackPadding).equal())})`,
},
[`&:not(${componentCls}-disabled):active`]: {
@@ -177,9 +237,20 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
};
const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
- const { componentCls } = token;
+ const {
+ componentCls,
+ trackHeight,
+ trackPadding,
+ innerMinMargin,
+ innerMaxMargin,
+ handleSize,
+ calc,
+ } = token;
const switchInnerCls = `${componentCls}-inner`;
+ const trackPaddingCalc = unit(calc(handleSize).add(calc(trackPadding).mul(2)).equal());
+ const innerMaxMarginCalc = unit(calc(innerMaxMargin).mul(2).equal());
+
return {
[componentCls]: {
[switchInnerCls]: {
@@ -187,8 +258,8 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
overflow: 'hidden',
borderRadius: 100,
height: '100%',
- paddingInlineStart: token.switchInnerMarginMax,
- paddingInlineEnd: token.switchInnerMarginMin,
+ paddingInlineStart: innerMaxMargin,
+ paddingInlineEnd: innerMinMargin,
transition: `padding-inline-start ${token.switchDuration} ease-in-out, padding-inline-end ${token.switchDuration} ease-in-out`,
[`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
@@ -200,51 +271,43 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
},
[`${switchInnerCls}-checked`]: {
- marginInlineStart: `calc(-100% + ${token.switchPinSize + token.switchPadding * 2}px - ${
- token.switchInnerMarginMax * 2
- }px)`,
- marginInlineEnd: `calc(100% - ${token.switchPinSize + token.switchPadding * 2}px + ${
- token.switchInnerMarginMax * 2
- }px)`,
+ marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
+ marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
},
[`${switchInnerCls}-unchecked`]: {
- marginTop: -token.switchHeight,
+ marginTop: calc(trackHeight).mul(-1).equal(),
marginInlineStart: 0,
marginInlineEnd: 0,
},
},
[`&${componentCls}-checked ${switchInnerCls}`]: {
- paddingInlineStart: token.switchInnerMarginMin,
- paddingInlineEnd: token.switchInnerMarginMax,
+ paddingInlineStart: innerMinMargin,
+ paddingInlineEnd: innerMaxMargin,
[`${switchInnerCls}-checked`]: {
marginInlineStart: 0,
marginInlineEnd: 0,
},
[`${switchInnerCls}-unchecked`]: {
- marginInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding * 2}px + ${
- token.switchInnerMarginMax * 2
- }px)`,
- marginInlineEnd: `calc(-100% + ${token.switchPinSize + token.switchPadding * 2}px - ${
- token.switchInnerMarginMax * 2
- }px)`,
+ marginInlineStart: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
+ marginInlineEnd: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
},
},
[`&:not(${componentCls}-disabled):active`]: {
[`&:not(${componentCls}-checked) ${switchInnerCls}`]: {
[`${switchInnerCls}-unchecked`]: {
- marginInlineStart: token.switchPadding * 2,
- marginInlineEnd: -token.switchPadding * 2,
+ marginInlineStart: calc(trackPadding).mul(2).equal(),
+ marginInlineEnd: calc(trackPadding).mul(-1).mul(2).equal(),
},
},
[`&${componentCls}-checked ${switchInnerCls}`]: {
[`${switchInnerCls}-checked`]: {
- marginInlineStart: -token.switchPadding * 2,
- marginInlineEnd: token.switchPadding * 2,
+ marginInlineStart: calc(trackPadding).mul(-1).mul(2).equal(),
+ marginInlineEnd: calc(trackPadding).mul(2).equal(),
},
},
},
@@ -253,7 +316,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
};
const genSwitchStyle = (token: SwitchToken): CSSObject => {
- const { componentCls } = token;
+ const { componentCls, trackHeight, trackMinWidth } = token;
return {
[componentCls]: {
@@ -262,9 +325,9 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
position: 'relative',
display: 'inline-block',
boxSizing: 'border-box',
- minWidth: token.switchMinWidth,
- height: token.switchHeight,
- lineHeight: `${token.switchHeight}px`,
+ minWidth: trackMinWidth,
+ height: trackHeight,
+ lineHeight: `${unit(trackHeight)}`,
verticalAlign: 'middle',
background: token.colorTextQuaternary,
border: '0',
@@ -302,52 +365,63 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
direction: 'rtl',
},
},
- };
+ } as CSSObject;
};
// ============================== Export ==============================
-export default genComponentStyleHook('Switch', token => {
- const switchHeight = token.fontSize * token.lineHeight;
- const switchHeightSM = token.controlHeight / 2;
- const switchPadding = 2; // This is magic
- const switchPinSize = switchHeight - switchPadding * 2;
- const switchPinSizeSM = switchHeightSM - switchPadding * 2;
-
- const switchToken = mergeToken<SwitchToken>(token, {
- switchMinWidth: switchPinSize * 2 + switchPadding * 4,
- switchHeight,
- switchDuration: token.motionDurationMid,
- switchColor: token.colorPrimary,
- switchDisabledOpacity: token.opacityLoading,
- switchInnerMarginMin: switchPinSize / 2,
- switchInnerMarginMax: switchPinSize + switchPadding + switchPadding * 2,
- switchPadding,
- switchPinSize,
- switchBg: token.colorBgContainer,
- switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2,
- switchHeightSM,
- switchInnerMarginMinSM: switchPinSizeSM / 2,
- switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + switchPadding * 2,
- switchPinSizeSM,
- switchHandleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
- switchLoadingIconSize: token.fontSizeIcon * 0.75,
- switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`,
- switchHandleActiveInset: '-30%',
- });
-
- return [
- genSwitchStyle(switchToken),
-
- // inner style
- genSwitchInnerStyle(switchToken),
-
- // handle style
- genSwitchHandleStyle(switchToken),
-
- // loading style
- genSwitchLoadingStyle(switchToken),
-
- // small style
- genSwitchSmallStyle(switchToken),
- ];
-});
+export const prepareComponentToken: GetDefaultToken<'Switch'> = token => {
+ const { fontSize, lineHeight, controlHeight, colorWhite } = token;
+
+ const height = fontSize * lineHeight;
+ const heightSM = controlHeight / 2;
+ const padding = 2; // Fixed value
+ const handleSize = height - padding * 2;
+ const handleSizeSM = heightSM - padding * 2;
+
+ return {
+ trackHeight: height,
+ trackHeightSM: heightSM,
+ trackMinWidth: handleSize * 2 + padding * 4,
+ trackMinWidthSM: handleSizeSM * 2 + padding * 2,
+ trackPadding: padding, // Fixed value
+ handleBg: colorWhite,
+ handleSize,
+ handleSizeSM,
+ handleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
+ innerMinMargin: handleSize / 2,
+ innerMaxMargin: handleSize + padding + padding * 2,
+ innerMinMarginSM: handleSizeSM / 2,
+ innerMaxMarginSM: handleSizeSM + padding + padding * 2,
+ };
+};
+
+export default genStyleHooks(
+ 'Switch',
+ token => {
+ const switchToken = mergeToken<SwitchToken>(token, {
+ switchDuration: token.motionDurationMid,
+ switchColor: token.colorPrimary,
+ switchDisabledOpacity: token.opacityLoading,
+ switchLoadingIconSize: token.calc(token.fontSizeIcon).mul(0.75).equal(),
+ switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`,
+ switchHandleActiveInset: '-30%',
+ });
+
+ return [
+ genSwitchStyle(switchToken),
+
+ // inner style
+ genSwitchInnerStyle(switchToken),
+
+ // handle style
+ genSwitchHandleStyle(switchToken),
+
+ // loading style
+ genSwitchLoadingStyle(switchToken),
+
+ // small style
+ genSwitchSmallStyle(switchToken),
+ ];
+ },
+ prepareComponentToken,
+);
diff --git a/components/tree-select/style/index.tsx b/components/tree-select/style/index.tsx
index bc81026851..f45efa3e32 100644
--- a/components/tree-select/style/index.tsx
+++ b/components/tree-select/style/index.tsx
@@ -4,6 +4,8 @@ import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal'
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { genTreeStyle } from '../../tree/style';
+export interface ComponentToken {}
+
interface TreeSelectToken extends FullToken<'TreeSelect'> {
treePrefixCls: string;
}
diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts
index 71c64a693a..760a543329 100644
--- a/components/tree/style/index.ts
+++ b/components/tree/style/index.ts
@@ -6,6 +6,8 @@ import type { DerivativeToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { genFocusOutline, resetComponent } from '../../style';
+export interface ComponentToken {}
+
// ============================ Keyframes =============================
const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
'0%': {
diff --git a/components/vc-util/Dom/dynamicCSS.ts b/components/vc-util/Dom/dynamicCSS.ts
index ac16baf621..a133854384 100644
--- a/components/vc-util/Dom/dynamicCSS.ts
+++ b/components/vc-util/Dom/dynamicCSS.ts
@@ -2,6 +2,7 @@ import canUseDom from '../../_util/canUseDom';
import contains from './contains';
const APPEND_ORDER = 'data-vc-order';
+const APPEND_PRIORITY = 'data-vc-priority';
const MARK_KEY = `vc-util-key`;
const containerCache = new Map<ContainerType, Node & ParentNode>();
@@ -14,8 +15,12 @@ interface Options {
attachTo?: ContainerType;
csp?: { nonce?: string };
prepend?: Prepend;
- mark?: string;
+ /**
+ * Config the `priority` of `prependQueue`. Default is `0`.
+ * It's useful if you need to insert style before other style.
+ */
priority?: number;
+ mark?: string;
}
function getMark({ mark }: Options = {}) {
@@ -56,10 +61,16 @@ export function injectCSS(css: string, option: Options = {}) {
return null;
}
- const { csp, prepend } = option;
+ const { csp, prepend, priority = 0 } = option;
+ const mergedOrder = getOrder(prepend);
+ const isPrependQueue = mergedOrder === 'prependQueue';
const styleNode = document.createElement('style');
- styleNode.setAttribute(APPEND_ORDER, getOrder(prepend));
+ styleNode.setAttribute(APPEND_ORDER, mergedOrder);
+
+ if (isPrependQueue && priority) {
+ styleNode.setAttribute(APPEND_PRIORITY, `${priority}`);
+ }
if (csp?.nonce) {
styleNode.nonce = csp?.nonce;
@@ -71,10 +82,18 @@ export function injectCSS(css: string, option: Options = {}) {
if (prepend) {
// If is queue `prepend`, it will prepend first style and then append rest style
- if (prepend === 'queue') {
- const existStyle = findStyles(container).filter(node =>
- ['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER)),
- );
+ if (isPrependQueue) {
+ const existStyle = findStyles(container).filter(node => {
+ // Ignore style which not injected by rc-util with prepend
+ if (!['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER))) {
+ return false;
+ }
+
+ // Ignore style which priority less then new style
+ const nodePriority = Number(node.getAttribute(APPEND_PRIORITY) || 0);
+ return priority >= nodePriority;
+ });
+
if (existStyle.length) {
container.insertBefore(styleNode, existStyle[existStyle.length - 1].nextSibling);
diff --git a/package.json b/package.json
index 9d26ace94b..0da4135158 100644
--- a/package.json
+++ b/package.json
@@ -285,7 +285,7 @@
"@simonwep/pickr": "~1.8.0",
"array-tree-filter": "^2.1.0",
"async-validator": "^4.0.0",
- "csstype": "^3.1.1",
+ "csstype": "^3.1.3",
"dayjs": "^1.10.5",
"dom-align": "^1.12.1",
"dom-scroll-into-view": "^2.0.0",
diff --git a/site/src/App.vue b/site/src/App.vue
index d8da04dfe0..5192a66865 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -20,6 +20,7 @@ import zhCN from '../../components/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { theme as antdTheme } from 'ant-design-vue';
+import type { ThemeConfig } from '../../components/config-provider/context';
import SiteToken from './SiteToken.vue';
function isZhCN(name: string) {
return /-cn\/?$/.test(name);
@@ -57,7 +58,10 @@ export default defineComponent({
const theme = ref<ThemeName>((localStorage.getItem('theme') as ThemeName) || 'light');
const compactTheme = ref<ThemeName>((localStorage.getItem('compactTheme') as ThemeName) || '');
const themeConfig = computed(() => {
- return { algorithm: getAlgorithm([...new Set([theme.value, compactTheme.value])]) };
+ return {
+ algorithm: getAlgorithm([...new Set([theme.value, compactTheme.value])]),
+ cssVar: true,
+ } as ThemeConfig;
});
const hashPriority = ref('low' as const);
watch(hashPriority, () => {
diff --git a/site/src/components/antdv-token-previewer/meta/TokenRelation.ts b/site/src/components/antdv-token-previewer/meta/TokenRelation.ts
index 5e4e761a5a..6ca32f6b31 100644
--- a/site/src/components/antdv-token-previewer/meta/TokenRelation.ts
+++ b/site/src/components/antdv-token-previewer/meta/TokenRelation.ts
@@ -1,7 +1,7 @@
-import type { AliasToken, MapToken, SeedToken } from 'ant-design-vue/es/theme/interface';
-import defaultMap from 'ant-design-vue/es/theme/themes/default';
-import seedToken from 'ant-design-vue/es/theme/themes/seed';
-import formatToken from 'ant-design-vue/es/theme/util/alias';
+import type { AliasToken, MapToken, SeedToken } from 'ant-design-vue/es/_theme/interface';
+import defaultMap from 'ant-design-vue/es/_theme/themes/default';
+import seedToken from 'ant-design-vue/es/_theme/themes/seed';
+import formatToken from 'ant-design-vue/es/_theme/util/alias';
export type PureAliasToken = Omit<AliasToken, keyof MapToken>;
diff --git a/site/src/components/antdv-token-previewer/meta/interface.ts b/site/src/components/antdv-token-previewer/meta/interface.ts
index 92347afe69..d0ed2c4281 100644
--- a/site/src/components/antdv-token-previewer/meta/interface.ts
+++ b/site/src/components/antdv-token-previewer/meta/interface.ts
@@ -1,4 +1,4 @@
-import type { ComponentTokenMap } from 'ant-design-vue/es/theme/interface';
+import type { ComponentTokenMap } from 'ant-design-vue/es/_theme/interface';
export interface TokenMeta {
type: string;
diff --git a/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx b/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
index f102539c47..ae9d673efd 100644
--- a/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
+++ b/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
@@ -11,7 +11,7 @@ import {
} from 'ant-design-vue';
import type { MutableTheme, SelectedToken } from '../interface';
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
-import seed from 'ant-design-vue/es/theme/themes/seed';
+import seed from 'ant-design-vue/es/_theme/themes/seed';
import tokenMeta from 'ant-design-vue/es/version/token-meta.json';
import classNames from 'ant-design-vue/es/_util/classNames';
diff --git a/site/src/components/antdv-token-previewer/utils/classifyToken.ts b/site/src/components/antdv-token-previewer/utils/classifyToken.ts
index 7197789e2f..017c54aad8 100644
--- a/site/src/components/antdv-token-previewer/utils/classifyToken.ts
+++ b/site/src/components/antdv-token-previewer/utils/classifyToken.ts
@@ -1,4 +1,4 @@
-import type { GlobalToken } from 'ant-design-vue/es/theme/interface';
+import type { GlobalToken } from 'ant-design-vue/es/_theme/interface';
import type { TokenValue } from '../interface';
function defineTokenType<T extends string>(types: T[]) {
diff --git a/site/src/components/antdv-token-previewer/utils/getDesignToken.ts b/site/src/components/antdv-token-previewer/utils/getDesignToken.ts
index ecbc563e0b..16ac2fe338 100644
--- a/site/src/components/antdv-token-previewer/utils/getDesignToken.ts
+++ b/site/src/components/antdv-token-previewer/utils/getDesignToken.ts
@@ -1,8 +1,8 @@
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
-import type { GlobalToken, MapToken } from 'ant-design-vue/es/theme/interface';
-import defaultMap from 'ant-design-vue/es/theme/themes/default';
-import seed from 'ant-design-vue/es/theme/themes/seed';
-import formatToken from 'ant-design-vue/es/theme/util/alias';
+import type { GlobalToken, MapToken } from 'ant-design-vue/es/_theme/interface';
+import defaultMap from 'ant-design-vue/es/_theme/themes/default';
+import seed from 'ant-design-vue/es/_theme/themes/seed';
+import formatToken from 'ant-design-vue/es/_theme/util/alias';
export default function getDesignToken(config: ThemeConfig = {}): GlobalToken {
const seedToken = { ...seed, ...config.token };
diff --git a/site/src/components/antdv-token-previewer/utils/makeStyle.tsx b/site/src/components/antdv-token-previewer/utils/makeStyle.tsx
index 9ef2432918..79f7ecbe5e 100644
--- a/site/src/components/antdv-token-previewer/utils/makeStyle.tsx
+++ b/site/src/components/antdv-token-previewer/utils/makeStyle.tsx
@@ -1,12 +1,12 @@
import type { CSSInterpolation } from 'ant-design-vue/es/_util/cssinjs';
import { useStyleRegister } from 'ant-design-vue/es/_util/cssinjs';
import { theme as antdTheme } from 'ant-design-vue';
-import type { GlobalToken } from 'ant-design-vue/es/theme/interface';
-import { mergeToken } from 'ant-design-vue/es/theme/internal';
+import type { GlobalToken } from 'ant-design-vue/es/_theme/interface';
+import { mergeToken } from 'ant-design-vue/es/_theme/internal';
import { computed } from 'vue';
import useConfigInject from 'ant-design-vue/es/config-provider/hooks/useConfigInject';
-import type { UseComponentStyleResult } from 'ant-design-vue/es/theme/internal';
+import type { UseComponentStyleResult } from 'ant-design-vue/es/_theme/internal';
const makeStyle = (
path: string,
styleFn: (token: GlobalToken & { rootCls: string }) => CSSInterpolation,
From a1e029429f9eeac3f375df38f89221ca8fc6f208 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Fri, 8 Nov 2024 16:50:36 +0800
Subject: [PATCH 2/7] fix: css var
---
components/_theme/context.ts | 37 ++++--------
.../_util/_cssinjs/hooks/useCSSVarRegister.ts | 59 +++----------------
.../_util/_cssinjs/hooks/useGlobalCache.tsx | 10 +++-
.../config-provider/hooks/useCssVarCls.ts | 3 +-
components/config-provider/hooks/useTheme.ts | 6 +-
.../config-provider/hooks/useThemeKey.ts | 12 +---
package.json | 2 +-
7 files changed, 32 insertions(+), 97 deletions(-)
diff --git a/components/_theme/context.ts b/components/_theme/context.ts
index 46141db260..8a86ed8fb3 100644
--- a/components/_theme/context.ts
+++ b/components/_theme/context.ts
@@ -64,39 +64,24 @@ export interface DesignTokenProviderProps {
};
}
-export const useDesignTokenInject = () => {
- return inject(
- DesignTokenContextKey,
- computed(() => globalDesignTokenApi.value || defaultConfig),
- );
-};
-
-export const useDesignTokenProvider = (props: ComputedRef<DesignTokenProviderProps>) => {
- const parentContext = useDesignTokenInject();
- const context = shallowRef<Partial<DesignTokenProviderProps>>(defaultConfig);
+export const useDesignTokenProvider = (value: ComputedRef<DesignTokenProviderProps>) => {
+ provide(DesignTokenContextKey, value);
watch(
- computed(() => [props.value, parentContext.value]),
- ([propsValue, parentContextValue]) => {
- const mergedContext: Partial<DesignTokenProviderProps> = {
- ...parentContextValue,
- };
- Object.keys(propsValue).forEach(key => {
- const value = propsValue[key];
- if (propsValue[key] !== undefined) {
- mergedContext[key] = value;
- }
- });
-
- context.value = mergedContext;
- globalDesignTokenApi.value = unref(mergedContext as any);
+ value,
+ () => {
+ globalDesignTokenApi.value = unref(value);
triggerRef(globalDesignTokenApi);
},
{ immediate: true, deep: true },
);
- provide(DesignTokenContextKey, context);
- return context;
};
+export const useDesignTokenInject = () => {
+ return inject(
+ DesignTokenContextKey,
+ computed(() => globalDesignTokenApi.value || defaultConfig),
+ );
+};
export const DesignTokenProvider = defineComponent({
props: {
value: objectType<DesignTokenProviderProps>(),
diff --git a/components/_util/_cssinjs/hooks/useCSSVarRegister.ts b/components/_util/_cssinjs/hooks/useCSSVarRegister.ts
index 3fbe01b9aa..e2b5d4d764 100644
--- a/components/_util/_cssinjs/hooks/useCSSVarRegister.ts
+++ b/components/_util/_cssinjs/hooks/useCSSVarRegister.ts
@@ -1,6 +1,6 @@
-import { updateCSS } from '../../../vc-util/Dom/dynamicCSS';
+import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS';
import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
-import { isClientSide, token2key, toStyleStr } from '../util';
+import { isClientSide, toStyleStr } from '../util';
import type { TokenWithCSSVar } from '../util/css-variables';
import { transformToken } from '../util/css-variables';
import type { ExtractStyle } from './useGlobalCache';
@@ -14,50 +14,10 @@ export const CSS_VAR_PREFIX = 'cssVar';
type CSSVarCacheValue<V, T extends Record<string, V> = Record<string, V>> = [
cssVarToken: TokenWithCSSVar<V, T>,
cssVarStr: string,
- tokenKey: string,
styleId: string,
cssVarKey: string,
];
-const tokenKeys = new Map<string, number>();
-function recordCleanToken(tokenKey: string) {
- tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1);
-}
-
-function removeStyleTags(key: string, instanceId: string) {
- if (typeof document !== 'undefined') {
- const styles = document.querySelectorAll(`style[${ATTR_MARK}="${key}"]`);
-
- styles.forEach(style => {
- if ((style as any)[CSS_IN_JS_INSTANCE] === instanceId) {
- style.parentNode?.removeChild(style);
- }
- });
- }
-}
-
-const TOKEN_THRESHOLD = 0;
-
-// Remove will check current keys first
-function cleanTokenStyle(tokenKey: string, instanceId: string) {
- tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1);
-
- const tokenKeyList = Array.from(tokenKeys.keys());
- const cleanableKeyList = tokenKeyList.filter(key => {
- const count = tokenKeys.get(key) || 0;
-
- return count <= 0;
- });
-
- // Should keep tokens under threshold for not to insert style too often
- if (tokenKeyList.length - cleanableKeyList.length > TOKEN_THRESHOLD) {
- cleanableKeyList.forEach(key => {
- removeStyleTags(key, instanceId);
- tokenKeys.delete(key);
- });
- }
-}
-
const useCSSVarRegister = <V, T extends Record<string, V>>(
config: ComputedRef<{
path: string[];
@@ -93,25 +53,20 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
scope: config.value.scope || '',
});
- const tokenKey = token2key(mergedToken, '');
-
const styleId = uniqueHash(stylePath.value, cssVarsStr);
-
- recordCleanToken(tokenKey);
- return [mergedToken, cssVarsStr, tokenKey, styleId, config.value.key];
+ return [mergedToken, cssVarsStr, styleId, config.value.key];
},
- ([, , tokenKey]) => {
+ ([, , styleId]) => {
if (isClientSide) {
- // Remove token will remove all related style
- cleanTokenStyle(tokenKey, styleContext.value?.cache?.instanceId);
+ removeCSS(styleId, { mark: ATTR_MARK });
}
},
- ([, cssVarsStr, tokenKey]) => {
+ ([, cssVarsStr, styleId]) => {
if (!cssVarsStr) {
return;
}
- const style = updateCSS(cssVarsStr, tokenKey, {
+ const style = updateCSS(cssVarsStr, styleId, {
mark: ATTR_MARK,
prepend: 'queue',
attachTo: styleContext.value.container,
diff --git a/components/_util/_cssinjs/hooks/useGlobalCache.tsx b/components/_util/_cssinjs/hooks/useGlobalCache.tsx
index 1d13e584d9..de2e707558 100644
--- a/components/_util/_cssinjs/hooks/useGlobalCache.tsx
+++ b/components/_util/_cssinjs/hooks/useGlobalCache.tsx
@@ -49,9 +49,13 @@ export default function useGlobalCache<CacheType>(
});
};
- watch(deps, () => {
- buildCache();
- });
+ watch(
+ deps,
+ () => {
+ buildCache();
+ },
+ { immediate: true },
+ );
let cacheEntity = globalCache.value.get(deps.value);
diff --git a/components/config-provider/hooks/useCssVarCls.ts b/components/config-provider/hooks/useCssVarCls.ts
index 4ebf486b29..8f2f779b01 100644
--- a/components/config-provider/hooks/useCssVarCls.ts
+++ b/components/config-provider/hooks/useCssVarCls.ts
@@ -1,5 +1,6 @@
import { useToken } from '../../_theme/internal';
import type { Ref } from 'vue';
+import { computed } from 'vue';
/**
* This hook is only for cssVar to add root className for components.
@@ -9,7 +10,7 @@ import type { Ref } from 'vue';
const useCSSVarCls = (prefixCls: Ref<string>) => {
const [, , , , cssVar] = useToken();
- return cssVar.value ? `${prefixCls.value}-css-var` : '';
+ return computed(() => (cssVar.value ? `${prefixCls.value}-css-var` : ''));
};
export default useCSSVarCls;
diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts
index 1a8c8d8f69..6dbc28a14f 100644
--- a/components/config-provider/hooks/useTheme.ts
+++ b/components/config-provider/hooks/useTheme.ts
@@ -2,17 +2,14 @@ import type { ThemeConfig } from '../context';
import { defaultConfig } from '../../_theme/internal';
import type { Ref } from 'vue';
import { computed } from 'vue';
-import useThemeKey from './useThemeKey';
import devWarning from '../../vc-util/warning';
-
+const themeKey = 'antdvtheme';
export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<ThemeConfig>) {
const themeConfig = computed(() => theme?.value || {});
const parentThemeConfig = computed<ThemeConfig>(() =>
themeConfig.value.inherit === false || !parentTheme?.value ? defaultConfig : parentTheme.value,
);
- const themeKey = useThemeKey();
-
if (process.env.NODE_ENV !== 'production') {
const cssVarEnabled = themeConfig.value.cssVar || parentThemeConfig.value.cssVar;
const validKey = !!(
@@ -43,6 +40,7 @@ export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<The
});
const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
+
const mergedCssVar = (themeConfig.value.cssVar ?? parentThemeConfig.value.cssVar) && {
prefix: 'ant', // Default to ant
...(typeof parentThemeConfig.value.cssVar === 'object' ? parentThemeConfig.value.cssVar : {}),
diff --git a/components/config-provider/hooks/useThemeKey.ts b/components/config-provider/hooks/useThemeKey.ts
index 7469df6971..4fa1c5db78 100644
--- a/components/config-provider/hooks/useThemeKey.ts
+++ b/components/config-provider/hooks/useThemeKey.ts
@@ -1,14 +1,6 @@
-import { getCurrentInstance } from 'vue';
-import _ from 'lodash';
-
+let uid = 0;
const useThemeKey = () => {
- const instance = getCurrentInstance();
-
- if (!instance) {
- return _.uniqueId() + '';
- }
-
- return instance.uid + '';
+ return 'themekey' + uid++;
};
export default useThemeKey;
diff --git a/package.json b/package.json
index 247ad4c6e3..7c7a39540e 100644
--- a/package.json
+++ b/package.json
@@ -247,7 +247,7 @@
"tinycolor2": "^1.6.0",
"ts-jest": "^28.0.5",
"ts-loader": "^9.1.0",
- "tsx": "^3.12.10",
+ "tsx": "^4.0.0",
"typedoc": "^0.23.25",
"typescript": "~4.9.3",
"umi-request": "^1.3.5",
From 3ca620a92939c8d275b50ecada89883408f3b0a0 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Fri, 8 Nov 2024 19:12:16 +0800
Subject: [PATCH 3/7] refactor: rename cssinjs folder
---
components/_theme/index.ts | 33 -
components/_theme/interface/alias.ts | 632 ----------
components/_theme/interface/components.ts | 137 --
components/_theme/interface/index.ts | 44 -
components/_theme/interface/maps/colors.ts | 598 ---------
components/_theme/interface/maps/font.ts | 139 ---
components/_theme/interface/maps/index.ts | 46 -
components/_theme/interface/maps/size.ts | 74 --
components/_theme/interface/maps/style.ts | 43 -
components/_theme/interface/presetColors.ts | 32 -
components/_theme/interface/seeds.ts | 279 -----
components/_theme/internal.ts | 51 -
components/_theme/themes/ColorMap.ts | 20 -
.../themes/compact/genCompactSizeMapToken.ts | 19 -
components/_theme/themes/compact/index.ts | 27 -
.../_theme/themes/dark/colorAlgorithm.ts | 9 -
components/_theme/themes/dark/colors.ts | 54 -
components/_theme/themes/dark/index.ts | 49 -
.../_theme/themes/default/colorAlgorithm.ts | 9 -
components/_theme/themes/default/colors.ts | 54 -
components/_theme/themes/default/index.ts | 53 -
components/_theme/themes/seed.ts | 81 --
.../_theme/themes/shared/genColorMapToken.ts | 100 --
.../_theme/themes/shared/genCommonMapToken.ts | 19 -
.../_theme/themes/shared/genControlHeight.ts | 13 -
.../_theme/themes/shared/genFontMapToken.ts | 44 -
.../_theme/themes/shared/genFontSizes.ts | 22 -
components/_theme/themes/shared/genRadius.ts | 59 -
.../_theme/themes/shared/genSizeMapToken.ts | 17 -
components/_theme/util/alias.ts | 207 ---
.../_theme/util/genComponentStyleHook.ts | 458 -------
components/_theme/util/getAlphaColor.ts | 29 -
components/_theme/util/statistic.ts | 85 --
components/_util/_cssinjs/Cache.ts | 32 -
components/_util/_cssinjs/Keyframes.ts | 19 -
components/_util/_cssinjs/StyleContext.tsx | 194 ---
.../_util/_cssinjs/hooks/useCacheToken.tsx | 254 ----
.../_util/_cssinjs/hooks/useGlobalCache.tsx | 115 --
components/_util/_cssinjs/hooks/useHMR.ts | 34 -
components/_util/_cssinjs/index.ts | 62 -
.../_cssinjs/linters/contentQuotesLinter.ts | 25 -
.../_cssinjs/linters/hashedAnimationLinter.ts | 15 -
components/_util/_cssinjs/linters/index.ts | 7 -
.../_util/_cssinjs/linters/interface.ts | 9 -
.../linters/legacyNotSelectorLinter.ts | 33 -
.../linters/logicalPropertiesLinter.ts | 88 --
.../_cssinjs/linters/parentSelectorLinter.ts | 15 -
components/_util/_cssinjs/linters/utils.ts | 13 -
components/_util/_cssinjs/theme/Theme.ts | 38 -
components/_util/_cssinjs/theme/ThemeCache.ts | 135 --
.../_util/_cssinjs/theme/createTheme.ts | 26 -
components/_util/_cssinjs/theme/index.ts | 4 -
components/_util/_cssinjs/theme/interface.ts | 5 -
.../_util/_cssinjs/transformers/interface.ts | 5 -
.../transformers/legacyLogicalProperties.ts | 173 ---
.../_util/_cssinjs/transformers/px2rem.ts | 77 --
components/_util/cssinjs/Cache.ts | 3 +
components/_util/cssinjs/StyleContext.tsx | 1 -
.../{_cssinjs => cssinjs}/extractStyle.ts | 0
.../hooks/useCSSVarRegister.ts | 0
.../_util/cssinjs/hooks/useCacheToken.tsx | 127 +-
.../hooks/useCompatibleInsertionEffect.tsx | 0
.../hooks/useEffectCleanupRegister.ts | 0
.../_util/cssinjs/hooks/useGlobalCache.tsx | 125 +-
.../hooks/useStyleRegister.tsx | 0
.../hooks/useStyleRegister/cacheMapUtil.ts | 91 --
.../cssinjs/hooks/useStyleRegister/index.tsx | 566 ---------
components/_util/cssinjs/index.ts | 57 +-
.../linters/NaNLinter.ts | 0
components/_util/cssinjs/linters/index.ts | 1 +
components/_util/cssinjs/linters/utils.ts | 4 +-
.../transformers/legacyLogicalProperties.ts | 61 +-
.../_util/cssinjs/transformers/px2rem.ts | 1 +
components/_util/cssinjs/util.ts | 118 --
.../util/cacheMapUtil.ts | 0
.../util/css-variables.ts | 0
.../_util/{_cssinjs => cssinjs}/util/index.ts | 0
components/button/style/compactCmp.ts | 8 +-
components/button/style/group.ts | 4 +-
components/button/style/index.ts | 8 +-
components/button/style/token.ts | 6 +-
components/config-provider/context.ts | 6 +-
.../config-provider/hooks/useCssVarCls.ts | 2 +-
components/config-provider/hooks/useTheme.ts | 2 +-
components/config-provider/index.tsx | 6 +-
components/config-provider/style/index.ts | 6 +-
components/switch/style/index.ts | 8 +-
components/theme/__tests__/util.test.js | 9 -
components/{_theme => theme}/context.ts | 4 +-
components/theme/convertLegacyToken.ts | 1107 -----------------
.../{_theme => theme}/getDesignToken.ts | 2 +-
components/theme/index.ts | 10 +-
components/theme/interface/alias.ts | 500 +++++++-
components/theme/interface/components.ts | 62 +-
components/theme/interface/index.ts | 35 +-
components/theme/interface/maps/colors.ts | 187 ++-
components/theme/interface/maps/font.ts | 90 ++
components/theme/interface/maps/index.ts | 23 +-
components/theme/interface/maps/size.ts | 6 +
components/theme/interface/maps/style.ts | 7 +-
components/theme/interface/presetColors.ts | 9 +-
components/theme/interface/seeds.ts | 71 +-
components/theme/internal.ts | 159 +--
components/theme/themes/compact/index.ts | 2 +-
components/theme/themes/dark/colors.ts | 1 +
components/theme/themes/dark/index.ts | 13 +-
components/theme/themes/default/colors.ts | 1 +
components/theme/themes/default/index.ts | 13 +-
components/theme/themes/seed.ts | 5 +
.../theme/themes/shared/genColorMapToken.ts | 8 +
.../theme/themes/shared/genFontMapToken.ts | 23 +-
.../theme/themes/shared/genFontSizes.ts | 16 +-
components/theme/themes/shared/genRadius.ts | 2 +-
components/{_theme => theme}/useToken.ts | 4 +-
components/theme/util/alias.ts | 26 +-
.../util/calc/CSSCalculator.ts | 0
.../util/calc/NumCalculator.ts | 0
.../{_theme => theme}/util/calc/calculator.ts | 0
.../{_theme => theme}/util/calc/index.ts | 0
.../theme/util/genComponentStyleHook.ts | 453 ++++++-
.../{_theme => theme}/util/genPresetColor.ts | 2 +-
components/{_theme => theme}/util/maxmin.ts | 2 +-
components/theme/util/statistic.ts | 24 +-
.../util/useResetIconStyle.ts | 4 +-
site/debugger/demo/demo.vue | 19 +-
.../meta/TokenRelation.ts | 8 +-
.../antdv-token-previewer/meta/interface.ts | 2 +-
.../token-panel-pro/TokenContent.tsx | 2 +-
.../utils/classifyToken.ts | 2 +-
.../utils/getDesignToken.ts | 8 +-
.../antdv-token-previewer/utils/makeStyle.tsx | 6 +-
131 files changed, 1787 insertions(+), 7265 deletions(-)
delete mode 100644 components/_theme/index.ts
delete mode 100644 components/_theme/interface/alias.ts
delete mode 100644 components/_theme/interface/components.ts
delete mode 100644 components/_theme/interface/index.ts
delete mode 100644 components/_theme/interface/maps/colors.ts
delete mode 100644 components/_theme/interface/maps/font.ts
delete mode 100644 components/_theme/interface/maps/index.ts
delete mode 100644 components/_theme/interface/maps/size.ts
delete mode 100644 components/_theme/interface/maps/style.ts
delete mode 100644 components/_theme/interface/presetColors.ts
delete mode 100644 components/_theme/interface/seeds.ts
delete mode 100644 components/_theme/internal.ts
delete mode 100644 components/_theme/themes/ColorMap.ts
delete mode 100644 components/_theme/themes/compact/genCompactSizeMapToken.ts
delete mode 100644 components/_theme/themes/compact/index.ts
delete mode 100644 components/_theme/themes/dark/colorAlgorithm.ts
delete mode 100644 components/_theme/themes/dark/colors.ts
delete mode 100644 components/_theme/themes/dark/index.ts
delete mode 100644 components/_theme/themes/default/colorAlgorithm.ts
delete mode 100644 components/_theme/themes/default/colors.ts
delete mode 100644 components/_theme/themes/default/index.ts
delete mode 100644 components/_theme/themes/seed.ts
delete mode 100644 components/_theme/themes/shared/genColorMapToken.ts
delete mode 100644 components/_theme/themes/shared/genCommonMapToken.ts
delete mode 100644 components/_theme/themes/shared/genControlHeight.ts
delete mode 100644 components/_theme/themes/shared/genFontMapToken.ts
delete mode 100644 components/_theme/themes/shared/genFontSizes.ts
delete mode 100644 components/_theme/themes/shared/genRadius.ts
delete mode 100644 components/_theme/themes/shared/genSizeMapToken.ts
delete mode 100644 components/_theme/util/alias.ts
delete mode 100644 components/_theme/util/genComponentStyleHook.ts
delete mode 100644 components/_theme/util/getAlphaColor.ts
delete mode 100644 components/_theme/util/statistic.ts
delete mode 100644 components/_util/_cssinjs/Cache.ts
delete mode 100644 components/_util/_cssinjs/Keyframes.ts
delete mode 100644 components/_util/_cssinjs/StyleContext.tsx
delete mode 100644 components/_util/_cssinjs/hooks/useCacheToken.tsx
delete mode 100644 components/_util/_cssinjs/hooks/useGlobalCache.tsx
delete mode 100644 components/_util/_cssinjs/hooks/useHMR.ts
delete mode 100644 components/_util/_cssinjs/index.ts
delete mode 100644 components/_util/_cssinjs/linters/contentQuotesLinter.ts
delete mode 100644 components/_util/_cssinjs/linters/hashedAnimationLinter.ts
delete mode 100644 components/_util/_cssinjs/linters/index.ts
delete mode 100644 components/_util/_cssinjs/linters/interface.ts
delete mode 100644 components/_util/_cssinjs/linters/legacyNotSelectorLinter.ts
delete mode 100644 components/_util/_cssinjs/linters/logicalPropertiesLinter.ts
delete mode 100644 components/_util/_cssinjs/linters/parentSelectorLinter.ts
delete mode 100644 components/_util/_cssinjs/linters/utils.ts
delete mode 100644 components/_util/_cssinjs/theme/Theme.ts
delete mode 100644 components/_util/_cssinjs/theme/ThemeCache.ts
delete mode 100644 components/_util/_cssinjs/theme/createTheme.ts
delete mode 100644 components/_util/_cssinjs/theme/index.ts
delete mode 100644 components/_util/_cssinjs/theme/interface.ts
delete mode 100644 components/_util/_cssinjs/transformers/interface.ts
delete mode 100644 components/_util/_cssinjs/transformers/legacyLogicalProperties.ts
delete mode 100644 components/_util/_cssinjs/transformers/px2rem.ts
rename components/_util/{_cssinjs => cssinjs}/extractStyle.ts (100%)
rename components/_util/{_cssinjs => cssinjs}/hooks/useCSSVarRegister.ts (100%)
rename components/_util/{_cssinjs => cssinjs}/hooks/useCompatibleInsertionEffect.tsx (100%)
rename components/_util/{_cssinjs => cssinjs}/hooks/useEffectCleanupRegister.ts (100%)
rename components/_util/{_cssinjs => cssinjs}/hooks/useStyleRegister.tsx (100%)
delete mode 100644 components/_util/cssinjs/hooks/useStyleRegister/cacheMapUtil.ts
delete mode 100644 components/_util/cssinjs/hooks/useStyleRegister/index.tsx
rename components/_util/{_cssinjs => cssinjs}/linters/NaNLinter.ts (100%)
delete mode 100644 components/_util/cssinjs/util.ts
rename components/_util/{_cssinjs => cssinjs}/util/cacheMapUtil.ts (100%)
rename components/_util/{_cssinjs => cssinjs}/util/css-variables.ts (100%)
rename components/_util/{_cssinjs => cssinjs}/util/index.ts (100%)
delete mode 100644 components/theme/__tests__/util.test.js
rename components/{_theme => theme}/context.ts (96%)
delete mode 100644 components/theme/convertLegacyToken.ts
rename components/{_theme => theme}/getDesignToken.ts (89%)
rename components/{_theme => theme}/useToken.ts (97%)
rename components/{_theme => theme}/util/calc/CSSCalculator.ts (100%)
rename components/{_theme => theme}/util/calc/NumCalculator.ts (100%)
rename components/{_theme => theme}/util/calc/calculator.ts (100%)
rename components/{_theme => theme}/util/calc/index.ts (100%)
rename components/{_theme => theme}/util/genPresetColor.ts (95%)
rename components/{_theme => theme}/util/maxmin.ts (88%)
rename components/{_theme => theme}/util/useResetIconStyle.ts (88%)
diff --git a/components/_theme/index.ts b/components/_theme/index.ts
deleted file mode 100644
index 481dd08d8e..0000000000
--- a/components/_theme/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import getDesignToken from './getDesignToken';
-import type { GlobalToken, MappingAlgorithm } from './interface';
-import { defaultConfig, useToken as useInternalToken } from './internal';
-import compactAlgorithm from './themes/compact';
-import darkAlgorithm from './themes/dark';
-import defaultAlgorithm from './themes/default';
-
-// ZombieJ: We export as object to user but array in internal.
-// This is used to minimize the bundle size for antd package but safe to refactor as object also.
-// Please do not export internal `useToken` directly to avoid something export unexpected.
-/** Get current context Design Token. Will be different if you are using nest theme config. */
-function useToken() {
- const [theme, token, hashId] = useInternalToken();
-
- return { theme, token, hashId };
-}
-
-export type { GlobalToken, MappingAlgorithm };
-
-export default {
- /** @private Test Usage. Do not use in production. */
- defaultConfig,
-
- /** Default seedToken */
- defaultSeed: defaultConfig.token,
-
- useToken,
- defaultAlgorithm,
- darkAlgorithm,
- compactAlgorithm,
- getDesignToken,
-};
diff --git a/components/_theme/interface/alias.ts b/components/_theme/interface/alias.ts
deleted file mode 100644
index c19d626489..0000000000
--- a/components/_theme/interface/alias.ts
+++ /dev/null
@@ -1,632 +0,0 @@
-import type { CSSProperties } from 'vue';
-import type { MapToken } from './maps';
-
-// ======================================================================
-// == Alias Token ==
-// ======================================================================
-// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
-
-export interface AliasToken extends MapToken {
- // Background
- /**
- * @nameZH 内容区域背景色（悬停）
- * @nameEN Background color of content area (hover)
- * @desc 控制内容区域背景色在鼠标悬停时的样式。
- * @descEN Control the style of background color of content area when mouse hovers over it.
- */
- colorFillContentHover: string;
- /**
- * @nameZH 替代背景色
- * @nameEN Alternative background color
- * @desc 控制元素替代背景色。
- * @descEN Control the alternative background color of element.
- */
- colorFillAlter: string;
- /**
- * @nameZH 内容区域背景色
- * @nameEN Background color of content area
- * @desc 控制内容区域的背景色。
- * @descEN Control the background color of content area.
- */
- colorFillContent: string;
- /**
- * @nameZH 容器禁用态下的背景色
- * @nameEN Disabled container background color
- * @desc 控制容器在禁用状态下的背景色。
- * @descEN Control the background color of container in disabled state.
- */
- colorBgContainerDisabled: string;
- /**
- * @nameZH 文本悬停态背景色
- * @nameEN Text hover background color
- * @desc 控制文本在悬停状态下的背景色。
- * @descEN Control the background color of text in hover state.
- */
- colorBgTextHover: string;
- /**
- * @nameZH 文本激活态背景色
- * @nameEN Text active background color
- * @desc 控制文本在激活状态下的背景色。
- * @descEN Control the background color of text in active state.
- */
- colorBgTextActive: string;
-
- // Border
- /**
- * @nameZH 背景边框颜色
- * @nameEN Background border color
- * @desc 控制元素背景边框的颜色。
- * @descEN Control the color of background border of element.
- */
- colorBorderBg: string;
- /**
- * @nameZH 分割线颜色
- * @nameEN Separator Color
- * @desc 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。
- * @descEN Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.
- */
- colorSplit: string;
-
- // Text
- /**
- * @nameZH 占位文本颜色
- * @nameEN Placeholder Text Color
- * @desc 控制占位文本的颜色。
- * @descEN Control the color of placeholder text.
- */
- colorTextPlaceholder: string;
- /**
- * @nameZH 禁用字体颜色
- * @nameEN Disabled Text Color
- * @desc 控制禁用状态下的字体颜色。
- * @descEN Control the color of text in disabled state.
- */
- colorTextDisabled: string;
- /**
- * @nameZH 标题字体颜色
- * @nameEN Heading Text Color
- * @desc 控制标题字体颜色。
- * @descEN Control the font color of heading.
- */
- colorTextHeading: string;
- /**
- * @nameZH 文本标签字体颜色
- * @nameEN Text label font color
- * @desc 控制文本标签字体颜色。
- * @descEN Control the font color of text label.
- */
- colorTextLabel: string;
- /**
- * @nameZH 文本描述字体颜色
- * @nameEN Text description font color
- * @desc 控制文本描述字体颜色。
- * @descEN Control the font color of text description.
- */
- colorTextDescription: string;
- /**
- * @nameZH 固定文本高亮颜色
- * @nameEN Fixed text highlight color
- * @desc 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。
- * @descEN Control the highlight color of text with background color, such as the text in Primary Button components.
- */
- colorTextLightSolid: string;
-
- /**
- /**
- * @nameZH 弱操作图标颜色
- * @nameEN Weak action icon color
- * @desc 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。
- * @descEN Weak action. Such as `allowClear` or Alert close button
- */
- colorIcon: string;
-
- /** */
- /**
- * @nameZH 弱操作图标悬浮态颜色
- * @nameEN Weak action icon hover color
- * @desc 控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。
- * @descEN Weak action hover color. Such as `allowClear` or Alert close button
- */
- colorIconHover: string;
-
- /**
- * @nameZH 高亮颜色
- * @nameEN Highlight color
- * @desc 控制页面元素高亮时的颜色。
- * @descEN Control the color of page element when highlighted.
- */
- colorHighlight: string;
-
- /**
- * @nameZH 输入组件的 Outline 颜色
- * @nameEN Input component outline color
- * @desc 控制输入组件的外轮廓线颜色。
- * @descEN Control the outline color of input component.
- */
- controlOutline: string;
-
- /**
- * @nameZH 警告状态下的 Outline 颜色
- * @nameEN Warning outline color
- * @desc 控制输入组件警告状态下的外轮廓线颜色。
- * @descEN Control the outline color of input component in warning state.
- */
- colorWarningOutline: string;
-
- /**
- * @nameZH 错误状态下的 Outline 颜色
- * @nameEN Error outline color
- * @desc 控制输入组件错误状态下的外轮廓线颜色。
- * @descEN Control the outline color of input component in error state.
- */
- colorErrorOutline: string;
-
- // Font
- /**
- * @nameZH 选择器、级联选择器等中的操作图标字体大小
- * @nameEN Operation icon font size in Select, Cascader, etc.
- * @desc 控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。
- * @descEN Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.
- */
- fontSizeIcon: number;
-
- /**
- * @nameZH 标题类组件（如 h1、h2、h3）或选中项的字体粗细
- * @nameEN Font weight for heading components (such as h1, h2, h3) or selected item
- * @desc 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。
- * @descEN Control the font weight of heading components (such as h1, h2, h3) or selected item.
- */
- fontWeightStrong: number;
-
- // Control
-
- /**
- * @nameZH 输入组件的外轮廓线宽度
- * @nameEN Input component outline width
- * @desc 控制输入组件的外轮廓线宽度。
- * @descEN Control the outline width of input component.
- */
- controlOutlineWidth: number;
-
- /**
- * @nameZH 控制组件项在鼠标悬浮时的背景颜色
- * @nameEN Background color of control component item when hovering
- * @desc 控制组件项在鼠标悬浮时的背景颜色。
- * @descEN Control the background color of control component item when hovering.
- */
- controlItemBgHover: string; // Note. It also is a color
-
- /**
- * @nameZH 控制组件项在激活状态下的背景颜色
- * @nameEN Background color of control component item when active
- * @desc 控制组件项在激活状态下的背景颜色。
- * @descEN Control the background color of control component item when active.
- */
- controlItemBgActive: string; // Note. It also is a color
-
- /**
- * @nameZH 控制组件项在鼠标悬浮且激活状态下的背景颜色
- * @nameEN Background color of control component item when hovering and active
- * @desc 控制组件项在鼠标悬浮且激活状态下的背景颜色。
- * @descEN Control the background color of control component item when hovering and active.
- */
- controlItemBgActiveHover: string; // Note. It also is a color
-
- /**
- * @nameZH 控制组件的交互大小
- * @nameEN Interactive size of control component
- * @desc 控制组件的交互大小。
- * @descEN Control the interactive size of control component.
- */
- controlInteractiveSize: number;
-
- /**
- * @nameZH 控制组件项在禁用状态下的激活背景颜色
- * @nameEN Background color of control component item when active and disabled
- * @desc 控制组件项在禁用状态下的激活背景颜色。
- * @descEN Control the background color of control component item when active and disabled.
- */
- controlItemBgActiveDisabled: string; // Note. It also is a color
-
- // Line
- /**
- * @nameZH 线条宽度(聚焦态)
- * @nameEN Line width(focus state)
- * @desc 控制线条的宽度，当组件处于聚焦态时。
- * @descEN Control the width of the line when the component is in focus state.
- */
- lineWidthFocus: number;
-
- // Padding
- /**
- * @nameZH 极小内间距
- * @nameEN Extra extra small padding
- * @desc 控制元素的极小内间距。
- * @descEN Control the extra extra small padding of the element.
- */
- paddingXXS: number;
- /**
- * @nameZH 特小内间距
- * @nameEN Extra small padding
- * @desc 控制元素的特小内间距。
- * @descEN Control the extra small padding of the element.
- */
- paddingXS: number;
- /**
- * @nameZH 小内间距
- * @nameEN Small padding
- * @desc 控制元素的小内间距。
- * @descEN Control the small padding of the element.
- */
- paddingSM: number;
- /**
- * @nameZH 内间距
- * @nameEN Padding
- * @desc 控制元素的内间距。
- * @descEN Control the padding of the element.
- */
- padding: number;
- /**
- * @nameZH 中等内间距
- * @nameEN Medium padding
- * @desc 控制元素的中等内间距。
- * @descEN Control the medium padding of the element.
- */
- paddingMD: number;
- /**
- * @nameZH 大内间距
- * @nameEN Large padding
- * @desc 控制元素的大内间距。
- * @descEN Control the large padding of the element.
- */
- paddingLG: number;
- /**
- * @nameZH 特大内间距
- * @nameEN Extra large padding
- * @desc 控制元素的特大内间距。
- * @descEN Control the extra large padding of the element.
- */
- paddingXL: number;
-
- // Padding Content
- /**
- * @nameZH 内容水平内间距（LG）
- * @nameEN Content horizontal padding (LG)
- * @desc 控制内容元素水平内间距，适用于大屏幕设备。
- * @descEN Control the horizontal padding of content element, suitable for large screen devices.
- */
- paddingContentHorizontalLG: number;
- /**
- * @nameZH 内容水平内间距
- * @nameEN Content horizontal padding
- * @desc 控制内容元素水平内间距。
- * @descEN Control the horizontal padding of content element.
- */
- paddingContentHorizontal: number;
- /**
- * @nameZH 内容水平内间距（SM）
- * @nameEN Content horizontal padding (SM)
- * @desc 控制内容元素水平内间距，适用于小屏幕设备。
- * @descEN Control the horizontal padding of content element, suitable for small screen devices.
- */
- paddingContentHorizontalSM: number;
- /**
- * @nameZH 内容垂直内间距（LG）
- * @nameEN Content vertical padding (LG)
- * @desc 控制内容元素垂直内间距，适用于大屏幕设备。
- * @descEN Control the vertical padding of content element, suitable for large screen devices.
- */
- paddingContentVerticalLG: number;
- /**
- * @nameZH 内容垂直内间距
- * @nameEN Content vertical padding
- * @desc 控制内容元素垂直内间距。
- * @descEN Control the vertical padding of content element.
- */
- paddingContentVertical: number;
- /**
- * @nameZH 内容垂直内间距（SM）
- * @nameEN Content vertical padding (SM)
- * @desc 控制内容元素垂直内间距，适用于小屏幕设备。
- * @descEN Control the vertical padding of content element, suitable for small screen devices.
- */
- paddingContentVerticalSM: number;
-
- // Margin
- /**
- * @nameZH 外边距 XXS
- * @nameEN Margin XXS
- * @desc 控制元素外边距，最小尺寸。
- * @descEN Control the margin of an element, with the smallest size.
- */
- marginXXS: number;
- /**
- * @nameZH 外边距 XS
- * @nameEN Margin XS
- * @desc 控制元素外边距，小尺寸。
- * @descEN Control the margin of an element, with a small size.
- */
- marginXS: number;
- /**
- * @nameZH 外边距 SM
- * @nameEN Margin SM
- * @desc 控制元素外边距，中小尺寸。
- * @descEN Control the margin of an element, with a medium-small size.
- */
- marginSM: number;
- /**
- * @nameZH 外边距
- * @nameEN Margin
- * @desc 控制元素外边距，中等尺寸。
- * @descEN Control the margin of an element, with a medium size.
- */
- margin: number;
- /**
- * @nameZH 外边距 MD
- * @nameEN Margin MD
- * @desc 控制元素外边距，中大尺寸。
- * @descEN Control the margin of an element, with a medium-large size.
- */
- marginMD: number;
- /**
- * @nameZH 外边距 LG
- * @nameEN Margin LG
- * @desc 控制元素外边距，大尺寸。
- * @descEN Control the margin of an element, with a large size.
- */
- marginLG: number;
- /**
- * @nameZH 外边距 XL
- * @nameEN Margin XL
- * @desc 控制元素外边距，超大尺寸。
- * @descEN Control the margin of an element, with an extra-large size.
- */
- marginXL: number;
- /**
- * @nameZH 外边距 XXL
- * @nameEN Margin XXL
- * @desc 控制元素外边距，最大尺寸。
- * @descEN Control the margin of an element, with the largest size.
- */
- marginXXL: number;
-
- // =============== Legacy: should be remove ===============
- /**
- * @nameZH 加载状态透明度
- * @nameEN Loading opacity
- * @desc 控制加载状态的透明度。
- * @descEN Control the opacity of the loading state.
- */
- opacityLoading: number;
-
- /**
- * @nameZH 一级阴影
- * @nameEN Box shadow
- * @desc 控制元素阴影样式。
- * @descEN Control the box shadow style of an element.
- */
- boxShadow: string;
- /**
- * @nameZH 二级阴影
- * @nameEN Secondary box shadow
- * @desc 控制元素二级阴影样式。
- * @descEN Control the secondary box shadow style of an element.
- */
- boxShadowSecondary: string;
- /**
- * @nameZH 三级阴影
- * @nameEN Tertiary box shadow
- * @desc 控制元素三级盒子阴影样式。
- * @descEN Control the tertiary box shadow style of an element.
- */
- boxShadowTertiary: string;
-
- /**
- * @nameZH 链接文本装饰
- * @nameEN Link text decoration
- * @desc 控制链接文本的装饰样式。
- * @descEN Control the text decoration style of a link.
- */
- linkDecoration: CSSProperties['textDecoration'];
- /**
- * @nameZH 链接鼠标悬浮时文本装饰
- * @nameEN Link text decoration on mouse hover
- * @desc 控制链接鼠标悬浮时文本的装饰样式。
- * @descEN Control the text decoration style of a link on mouse hover.
- */
- linkHoverDecoration: CSSProperties['textDecoration'];
- /**
- * @nameZH 链接聚焦时文本装饰
- * @nameEN Link text decoration on focus
- * @desc 控制链接聚焦时文本的装饰样式。
- * @descEN Control the text decoration style of a link on focus.
- */
- linkFocusDecoration: CSSProperties['textDecoration'];
-
- /**
- * @nameZH 控制水平内间距
- * @nameEN Control horizontal padding
- * @desc 控制元素水平内间距。
- * @descEN Control the horizontal padding of an element.
- */
- controlPaddingHorizontal: number;
- /**
- * @nameZH 控制中小尺寸水平内间距
- * @nameEN Control horizontal padding with a small-medium size
- * @desc 控制元素中小尺寸水平内间距。
- * @descEN Control the horizontal padding of an element with a small-medium size.
- */
- controlPaddingHorizontalSM: number;
-
- // Media queries breakpoints
- /**
- * @nameZH 屏幕宽度（像素） - 超小屏幕
- * @nameEN Screen width (pixels) - Extra small screens
- * @desc 控制超小屏幕的屏幕宽度。
- * @descEN Control the screen width of extra small screens.
- */
- screenXS: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超小屏幕最小值
- * @nameEN Screen width (pixels) - Extra small screens minimum value
- * @desc 控制超小屏幕的最小宽度。
- * @descEN Control the minimum width of extra small screens.
- */
- screenXSMin: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超小屏幕最大值
- * @nameEN Screen width (pixels) - Extra small screens maximum value
- * @desc 控制超小屏幕的最大宽度。
- * @descEN Control the maximum width of extra small screens.
- */
- screenXSMax: number;
- /**
- * @nameZH 屏幕宽度（像素） - 小屏幕
- * @nameEN Screen width (pixels) - Small screens
- * @desc 控制小屏幕的屏幕宽度。
- * @descEN Control the screen width of small screens.
- */
- screenSM: number;
- /**
- * @nameZH 屏幕宽度（像素） - 小屏幕最小值
- * @nameEN Screen width (pixels) - Small screens minimum value
- * @desc 控制小屏幕的最小宽度。
- * @descEN Control the minimum width of small screens.
- */
- screenSMMin: number;
- /**
- * @nameZH 屏幕宽度（像素） - 小屏幕最大值
- * @nameEN Screen width (pixels) - Small screens maximum value
- * @desc 控制小屏幕的最大宽度。
- * @descEN Control the maximum width of small screens.
- */
- screenSMMax: number;
- /**
- * @nameZH 屏幕宽度（像素） - 中等屏幕
- * @nameEN Screen width (pixels) - Medium screens
- * @desc 控制中等屏幕的屏幕宽度。
- * @descEN Control the screen width of medium screens.
- */
- screenMD: number;
- /**
- * @nameZH 屏幕宽度（像素） - 中等屏幕最小值
- * @nameEN Screen width (pixels) - Medium screens minimum value
- * @desc 控制中等屏幕的最小宽度。
- * @descEN Control the minimum width of medium screens.
- */
- screenMDMin: number;
- /**
- * @nameZH 屏幕宽度（像素） - 中等屏幕最大值
- * @nameEN Screen width (pixels) - Medium screens maximum value
- * @desc 控制中等屏幕的最大宽度。
- * @descEN Control the maximum width of medium screens.
- */
- screenMDMax: number;
- /**
- * @nameZH 屏幕宽度（像素） - 大屏幕
- * @nameEN Screen width (pixels) - Large screens
- * @desc 控制大屏幕的屏幕宽度。
- * @descEN Control the screen width of large screens.
- */
- screenLG: number;
- /**
- * @nameZH 屏幕宽度（像素） - 大屏幕最小值
- * @nameEN Screen width (pixels) - Large screens minimum value
- * @desc 控制大屏幕的最小宽度。
- * @descEN Control the minimum width of large screens.
- */
- screenLGMin: number;
- /**
- * @nameZH 屏幕宽度（像素） - 大屏幕最大值
- * @nameEN Screen width (pixels) - Large screens maximum value
- * @desc 控制大屏幕的最大宽度。
- * @descEN Control the maximum width of large screens.
- */
- screenLGMax: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超大屏幕
- * @nameEN Screen width (pixels) - Extra large screens
- * @desc 控制超大屏幕的屏幕宽度。
- * @descEN Control the screen width of extra large screens.
- */
- screenXL: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超大屏幕最小值
- * @nameEN Screen width (pixels) - Extra large screens minimum value
- * @desc 控制超大屏幕的最小宽度。
- * @descEN Control the minimum width of extra large screens.
- */
- screenXLMin: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超大屏幕最大值
- * @nameEN Screen width (pixels) - Extra large screens maximum value
- * @desc 控制超大屏幕的最大宽度。
- * @descEN Control the maximum width of extra large screens.
- */
- screenXLMax: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超超大屏幕
- * @nameEN Screen width (pixels) - Extra extra large screens.
- * @desc 控制超超大屏幕的屏幕宽度。
- * @descEN Control the screen width of extra extra large screens.
- */
- screenXXL: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超超大屏幕最小值
- * @nameEN Screen width (pixels) - Extra extra large screens minimum value
- * @desc 控制超超大屏幕的最小宽度。
- * @descEN Control the minimum width of extra extra large screens.
- */
- screenXXLMin: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超超大屏幕最大值
- * @nameEN Screen width (pixels) - Extra extra large screens maximum value
- * @desc 控制超超大屏幕的最大宽度。
- * @descEN Control the maximum width of extra extra large screens.
- */
- screenXXLMax: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超超超大屏幕
- * @nameEN Screen width (pixels) - Extra extra extra large screens.
- * @desc 控制超超超大屏幕的屏幕宽度。
- * @descEN Control the screen width of extra extra extra large screens.
- */
- screenXXXL: number;
- /**
- * @nameZH 屏幕宽度（像素） - 超超超大屏幕最小值
- * @nameEN Screen width (pixels) - Extra extra extra large screens minimum value
- * @desc 控制超超超大屏幕的最小宽度。
- * @descEN Control the minimum width of extra extra extra large screens.
- */
- screenXXXLMin: number;
-
- /**
- * @deprecated
- * Used for DefaultButton, Switch which has default outline
- * @desc 默认样式的 Outline 颜色
- * @descEN Default style outline color.
- */
- controlTmpOutline: string;
-
- // FIXME: component box-shadow, should be removed
- /** @internal */
- boxShadowPopoverArrow: string;
- /** @internal */
- boxShadowCard: string;
- /** @internal */
- boxShadowDrawerRight: string;
- /** @internal */
- boxShadowDrawerLeft: string;
- /** @internal */
- boxShadowDrawerUp: string;
- /** @internal */
- boxShadowDrawerDown: string;
- /** @internal */
- boxShadowTabsOverflowLeft: string;
- /** @internal */
- boxShadowTabsOverflowRight: string;
- /** @internal */
- boxShadowTabsOverflowTop: string;
- /** @internal */
- boxShadowTabsOverflowBottom: string;
-}
diff --git a/components/_theme/interface/components.ts b/components/_theme/interface/components.ts
deleted file mode 100644
index 00f6a59509..0000000000
--- a/components/_theme/interface/components.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import type { ComponentToken as WaveToken } from '../../_util/wave/style';
-import type { ComponentToken as AffixComponentToken } from '../../affix/style';
-import type { ComponentToken as AlertComponentToken } from '../../alert/style';
-import type { ComponentToken as AnchorComponentToken } from '../../anchor/style';
-import type { ComponentToken as AppComponentToken } from '../../app/style';
-import type { ComponentToken as AvatarComponentToken } from '../../avatar/style';
-import type { ComponentToken as BadgeComponentToken } from '../../badge/style';
-import type { ComponentToken as BreadcrumbComponentToken } from '../../breadcrumb/style';
-import type { ComponentToken as ButtonComponentToken } from '../../button/style';
-import type { ComponentToken as CalendarComponentToken } from '../../calendar/style';
-import type { ComponentToken as CardComponentToken } from '../../card/style';
-import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
-import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
-import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style';
-import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';
-// import type { ComponentToken as ColorPickerComponentToken } from '../../color-picker/style';
-import type { ComponentToken as CommentComponentToken } from '../../comment/style';
-import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
-import type { ComponentToken as DescriptionsComponentToken } from '../../descriptions/style';
-import type { ComponentToken as DividerComponentToken } from '../../divider/style';
-import type { ComponentToken as DrawerComponentToken } from '../../drawer/style';
-import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
-import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
-import type { ComponentToken as FlexComponentToken } from '../../flex/style';
-import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style';
-import type { ComponentToken as FormComponentToken } from '../../form/style';
-import type { ComponentToken as GridComponentToken } from '../../grid/style';
-import type { ComponentToken as ImageComponentToken } from '../../image/style';
-import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
-import type { ComponentToken as InputComponentToken } from '../../input/style';
-import type { ComponentToken as LayoutComponentToken } from '../../layout/style';
-import type { ComponentToken as ListComponentToken } from '../../list/style';
-import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
-import type { ComponentToken as MenuComponentToken } from '../../menu/style';
-import type { ComponentToken as MessageComponentToken } from '../../message/style';
-import type { ComponentToken as ModalComponentToken } from '../../modal/style';
-import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
-import type { ComponentToken as PageHeaderComponentToken } from '../../page-header/style';
-import type { ComponentToken as PaginationComponentToken } from '../../pagination/style';
-import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
-import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
-import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
-import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
-import type { ComponentToken as RadioComponentToken } from '../../radio/style';
-import type { ComponentToken as RateComponentToken } from '../../rate/style';
-import type { ComponentToken as ResultComponentToken } from '../../result/style';
-import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
-import type { ComponentToken as SelectComponentToken } from '../../select/style';
-import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style';
-import type { ComponentToken as SliderComponentToken } from '../../slider/style';
-import type { ComponentToken as SpaceComponentToken } from '../../space/style';
-import type { ComponentToken as SpinComponentToken } from '../../spin/style';
-import type { ComponentToken as StatisticComponentToken } from '../../statistic/style';
-import type { ComponentToken as StepsComponentToken } from '../../steps/style';
-import type { ComponentToken as SwitchComponentToken } from '../../switch/style';
-import type { ComponentToken as TableComponentToken } from '../../table/style';
-import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
-import type { ComponentToken as TagComponentToken } from '../../tag/style';
-import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
-import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
-import type { ComponentToken as TourComponentToken } from '../../tour/style';
-import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
-import type { ComponentToken as TreeSelectComponentToken } from '../../tree-select/style';
-import type { ComponentToken as TreeComponentToken } from '../../tree/style';
-import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
-import type { ComponentToken as UploadComponentToken } from '../../upload/style';
-
-export interface ComponentTokenMap {
- Affix?: AffixComponentToken;
- Alert?: AlertComponentToken;
- Anchor?: AnchorComponentToken;
- Avatar?: AvatarComponentToken;
- Badge?: BadgeComponentToken;
- Button?: ButtonComponentToken;
- Breadcrumb?: BreadcrumbComponentToken;
- Card?: CardComponentToken;
- Carousel?: CarouselComponentToken;
- Cascader?: CascaderComponentToken;
- Checkbox?: CheckboxComponentToken;
- // ColorPicker?: ColorPickerComponentToken;
- Collapse?: CollapseComponentToken;
- Comment?: CommentComponentToken;
- DatePicker?: DatePickerComponentToken;
- Descriptions?: DescriptionsComponentToken;
- Divider?: DividerComponentToken;
- Drawer?: DrawerComponentToken;
- Dropdown?: DropdownComponentToken;
- Empty?: EmptyComponentToken;
- Flex?: FlexComponentToken;
- FloatButton?: FloatButtonComponentToken;
- Form?: FormComponentToken;
- Grid?: GridComponentToken;
- Image?: ImageComponentToken;
- Input?: InputComponentToken;
- InputNumber?: InputNumberComponentToken;
- Layout?: LayoutComponentToken;
- List?: ListComponentToken;
- Mentions?: MentionsComponentToken;
- Notification?: NotificationComponentToken;
- PageHeader?: PageHeaderComponentToken;
- Pagination?: PaginationComponentToken;
- Popover?: PopoverComponentToken;
- Popconfirm?: PopconfirmComponentToken;
- Rate?: RateComponentToken;
- Radio?: RadioComponentToken;
- Result?: ResultComponentToken;
- Segmented?: SegmentedComponentToken;
- Select?: SelectComponentToken;
- Skeleton?: SkeletonComponentToken;
- Slider?: SliderComponentToken;
- Spin?: SpinComponentToken;
- Statistic?: StatisticComponentToken;
- Switch?: SwitchComponentToken;
- Tag?: TagComponentToken;
- Tree?: TreeComponentToken;
- TreeSelect?: TreeSelectComponentToken;
- Typography?: TypographyComponentToken;
- Timeline?: TimelineComponentToken;
- Transfer?: TransferComponentToken;
- Tabs?: TabsComponentToken;
- Calendar?: CalendarComponentToken;
- Steps?: StepsComponentToken;
- Menu?: MenuComponentToken;
- Modal?: ModalComponentToken;
- Message?: MessageComponentToken;
- Upload?: UploadComponentToken;
- Tooltip?: TooltipComponentToken;
- Table?: TableComponentToken;
- Space?: SpaceComponentToken;
- Progress?: ProgressComponentToken;
- Tour?: TourComponentToken;
- QRCode?: QRCodeComponentToken;
- App?: AppComponentToken;
-
- /** @private Internal TS definition. Do not use. */
- Wave?: WaveToken;
-}
diff --git a/components/_theme/interface/index.ts b/components/_theme/interface/index.ts
deleted file mode 100644
index 8d22a3183e..0000000000
--- a/components/_theme/interface/index.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { CSSInterpolation, DerivativeFunc } from '../../_util/_cssinjs';
-import type { AliasToken } from './alias';
-import type { ComponentTokenMap } from './components';
-import type { MapToken } from './maps';
-import type { SeedToken } from './seeds';
-import type { VueNode } from '../..//_util/type';
-import type { Ref } from 'vue';
-
-export type MappingAlgorithm = DerivativeFunc<SeedToken, MapToken>;
-
-export type OverrideToken = {
- [key in keyof ComponentTokenMap]: Partial<ComponentTokenMap[key]> & Partial<AliasToken>;
-};
-
-/** Final token which contains the components level override */
-export type GlobalToken = AliasToken & ComponentTokenMap;
-
-export type { AliasToken } from './alias';
-export type { ComponentTokenMap } from './components';
-export type {
- ColorMapToken,
- ColorNeutralMapToken,
- CommonMapToken,
- FontMapToken,
- HeightMapToken,
- MapToken,
- SizeMapToken,
- StyleMapToken,
-} from './maps';
-export { PresetColors } from './presetColors';
-export type {
- LegacyColorPalettes,
- ColorPalettes,
- PresetColorKey,
- PresetColorType,
-} from './presetColors';
-export type { SeedToken } from './seeds';
-
-export type UseComponentStyleResult = [(node: VueNode) => VueNode, Ref<string>];
-
-export type GenerateStyle<
- ComponentToken extends object = AliasToken,
- ReturnType = CSSInterpolation,
-> = (token: ComponentToken) => ReturnType;
diff --git a/components/_theme/interface/maps/colors.ts b/components/_theme/interface/maps/colors.ts
deleted file mode 100644
index 659209d8df..0000000000
--- a/components/_theme/interface/maps/colors.ts
+++ /dev/null
@@ -1,598 +0,0 @@
-export interface ColorNeutralMapToken {
- /**
- * @internal
- */
- colorTextBase: string;
-
- /**
- * @internal
- */
- colorBgBase: string;
-
- // ---------- Text ---------- //
-
- /**
- * @nameZH 一级文本色
- * @nameEN Text Color
- * @desc 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。
- * @descEN Default text color which comply with W3C standards, and this color is also the darkest neutral color.
- */
- colorText: string;
-
- /**
- * @nameZH 二级文本色
- * @nameEN Secondary Text Color
- * @desc 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。
- * @descEN The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.
- */
- colorTextSecondary: string;
-
- /**
- * @nameZH 三级文本色
- * @desc 第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。
- * @descEN The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc.
- */
- colorTextTertiary: string;
-
- /**
- * @nameZH 四级文本色
- * @desc 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。
- * @descEN The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.
- */
- colorTextQuaternary: string;
-
- // ---------- Border ---------- //
-
- /**
- * @nameZH 一级边框色
- * @nameEN Default Border Color
- * @desc 默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。
- * @descEN Default border color, used to separate different elements, such as: form separator, card separator, etc.
- */
- colorBorder: string;
-
- /**
- * @nameZH 二级边框色
- * @nameEN Secondary Border Color
- * @desc 比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。
- * @descEN Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used.
- */
- colorBorderSecondary: string;
-
- // ---------- Fill ---------- //
-
- /**
- * @nameZH 一级填充色
- * @desc 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。
- * @descEN The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider.
- */
- colorFill: string;
-
- /**
- * @nameZH 二级填充色
- * @desc 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。
- * @descEN The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc.
- */
- colorFillSecondary: string;
-
- /**
- * @nameZH 三级填充色
- * @desc 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。
- * @descEN The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.
- */
- colorFillTertiary: string;
-
- /**
- * @nameZH 四级填充色
- * @desc 最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。
- * @descEN The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc.
- */
- colorFillQuaternary: string;
-
- // ---------- Surface ---------- //
-
- /**
- * @nameZH 布局背景色
- * @nameEN Layout Background Color
- * @desc 该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的
- * @descEN This color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong.
- */
- colorBgLayout: string;
-
- /**
- * @nameZH 组件容器背景色
- * @desc 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。
- * @descEN Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.
- */
- colorBgContainer: string;
-
- /**
- * @nameZH 浮层容器背景色
- * @desc 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。
- * @descEN Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc.
- */
- colorBgElevated: string;
-
- /**
- * @nameZH 引起注意的背景色
- * @desc 该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。
- * @descEN This color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip.
- */
- colorBgSpotlight: string;
- /**
- * @nameZH 毛玻璃容器背景色
- * @nameEN Frosted glass container background color
- * @desc 控制毛玻璃容器的背景色，通常为透明色。
- * @descEN Control the background color of frosted glass container, usually transparent.
- */
- colorBgBlur: string;
-}
-
-/**
- * 品牌色梯度变量
- */
-interface ColorPrimaryMapToken {
- /**
- * @nameZH 品牌主色
- * @nameEN Primary color of the brand
- * @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一，用于产品的主色调、主按钮、主图标、主文本等
- * @descEN The brand color is one of the most intuitive visual elements that reflects product characteristics and communication concepts, and is used for the main color tone, main buttons, main icons, main text, etc. of the product.
- */
- colorPrimary: string; // 6
-
- /**
- * @nameZH 主色浅色背景色
- * @nameEN Light background color of primary color
- * @desc 主色浅色背景颜色，一般用于视觉层级较弱的选中状态。
- * @descEN Light background color of primary color, usually used for weak visual level selection state.
- */
- colorPrimaryBg: string; // 1
-
- /**
- * @nameZH 主色浅色背景悬浮态
- * @nameEN Hover state of light background color of primary color
- * @desc 与主色浅色背景颜色相对应的悬浮态颜色。
- * @descEN The hover state color corresponding to the light background color of the primary color.
- */
- colorPrimaryBgHover: string; // 2
-
- /**
- * @nameZH 主色描边色
- * @nameEN Border color of primary color
- * @desc 主色梯度下的描边用色，用在 Slider 等组件的描边上。
- * @descEN The stroke color under the main color gradient, used on the stroke of components such as Slider.
- */
- colorPrimaryBorder: string; // 3
-
- /**
- * @nameZH 主色描边色悬浮态
- * @nameEN Hover state of border color of primary color
- * @desc 主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。
- * @descEN The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button.
- */
- colorPrimaryBorderHover: string; // 4
-
- /**
- * @nameZH 主色悬浮态
- * @nameEN Hover state of primary color
- * @desc 主色梯度下的悬浮态。
- * @descEN Hover state under the main color gradient.
- */
- colorPrimaryHover: string; // 5
-
- /**
- * @nameZH 主色激活态
- * @nameEN Active state of primary color
- * @desc 主色梯度下的深色激活态。
- * @descEN Dark active state under the main color gradient.
- */
- colorPrimaryActive: string; // 7
-
- /**
- * @nameZH 主色文本悬浮态
- * @nameEN Hover state of text color of primary color
- * @desc 主色梯度下的文本悬浮态。
- * @descEN Hover state of text color under the main color gradient.
- */
- colorPrimaryTextHover: string; // 8
-
- /**
- * @nameZH 主色文本
- * @nameEN Text color of primary color
- * @desc 主色梯度下的文本颜色。
- * @descEN Text color under the main color gradient.
- */
- colorPrimaryText: string; // 9
-
- /**
- * @nameZH 主色文本激活态
- * @nameEN Active state of text color of primary color
- * @desc 主色梯度下的文本激活态。
- * @descEN Active state of text color under the main color gradient.
- */
- colorPrimaryTextActive: string; // 10
-}
-
-interface ColorSuccessMapToken {
- /**
- * @nameZH 成功色的浅色背景颜色
- * @nameEN Light Background Color of Success Color
- * @desc 成功色的浅色背景颜色，用于 Tag 和 Alert 的成功态背景色
- * @descEN Light background color of success color, used for Tag and Alert success state background color
- */
- colorSuccessBg: string; // 1
-
- /**
- * @nameZH 成功色的浅色背景色悬浮态
- * @nameEN Hover State Color of Light Success Background
- * @desc 成功色浅色背景颜色，一般用于视觉层级较弱的选中状态，不过 antd 目前没有使用到该 token
- * @descEN Light background color of success color, but antd does not use this token currently
- */
- colorSuccessBgHover: string; // 2
-
- /**
- * @nameZH 成功色的描边色
- * @nameEN Border Color of Success Color
- * @desc 成功色的描边色，用于 Tag 和 Alert 的成功态描边色
- * @descEN Border color of success color, used for Tag and Alert success state border color
- */
- colorSuccessBorder: string; // 3
-
- /**
- * @nameZH 成功色的描边色悬浮态
- * @nameEN Hover State Color of Success Border
- * @desc 成功色的描边色悬浮态
- * @descEN Hover state color of success color border
- */
- colorSuccessBorderHover: string; // 4
-
- /**
- * @nameZH 成功色的深色悬浮态
- * @nameEN Hover State Color of Dark Success
- * @desc 成功色的深色悬浮态
- * @descEN Hover state color of dark success color
- */
- colorSuccessHover: string; // 5
-
- /**
- * @nameZH 成功色
- * @nameEN Success Color
- * @desc 默认的成功色，如 Result、Progress 等组件中都有使用该颜色
- * @descEN Default success color, used in components such as Result and Progress
- */
- colorSuccess: string; // 6
-
- /**
- * @nameZH 成功色的深色激活态
- * @nameEN Active State Color of Dark Success
- * @desc 成功色的深色激活态
- * @descEN Active state color of dark success color
- */
- colorSuccessActive: string; // 7
-
- /**
- * @nameZH 成功色的文本悬浮态
- * @nameEN Hover State Color of Success Text
- * @desc 成功色的文本悬浮态
- * @descEN Hover state color of success color text
- */
- colorSuccessTextHover: string; // 8
-
- /**
- * @nameZH 成功色的文本默认态
- * @nameEN Default State Color of Success Text
- * @desc 成功色的文本默认态
- * @descEN Default state color of success color text
- */
- colorSuccessText: string; // 9
-
- /**
- * @nameZH 成功色的文本激活态
- * @nameEN Active State Color of Success Text
- * @desc 成功色的文本激活态
- * @descEN Active state color of success color text
- */
- colorSuccessTextActive: string; // 10
-}
-
-interface ColorWarningMapToken {
- /**
- * @nameZH 警戒色的浅色背景颜色
- * @nameEN Warning background color
- * @desc 警戒色的浅色背景颜色
- * @descEN The background color of the warning state.
- */
- colorWarningBg: string; // 1
-
- /**
- * @nameZH 警戒色的浅色背景色悬浮态
- * @nameEN Warning background color hover state
- * @desc 警戒色的浅色背景色悬浮态
- * @descEN The hover state background color of the warning state.
- */
- colorWarningBgHover: string; // 2
-
- /**
- * @nameZH 警戒色的描边色
- * @nameEN Warning border color
- * @desc 警戒色的描边色
- * @descEN The border color of the warning state.
- */
- colorWarningBorder: string; // 3
-
- /**
- * @nameZH 警戒色的描边色悬浮态
- * @nameEN Warning border color hover state
- * @desc 警戒色的描边色悬浮态
- * @descEN The hover state border color of the warning state.
- */
- colorWarningBorderHover: string; // 4
-
- /**
- * @nameZH 警戒色的深色悬浮态
- * @nameEN Warning hover color
- * @desc 警戒色的深色悬浮态
- * @descEN The hover state of the warning color.
- */
- colorWarningHover: string; // 5
-
- /**
- * @nameZH 警戒色
- * @nameEN Warning color
- * @desc 最常用的警戒色，例如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该颜色
- * @descEN The most commonly used warning color, used for warning components such as Notification, Alert, or input components.
- */
- colorWarning: string; // 6
-
- /**
- * @nameZH 警戒色的深色激活态
- * @nameEN Warning active color
- * @desc 警戒色的深色激活态
- * @descEN The active state of the warning color.
- */
- colorWarningActive: string; // 7
-
- /**
- * @nameZH 警戒色的文本悬浮态
- * @nameEN Warning text hover state
- * @desc 警戒色的文本悬浮态
- * @descEN The hover state of the text in the warning color.
- */
- colorWarningTextHover: string; // 8
-
- /**
- * @nameZH 警戒色的文本默认态
- * @nameEN Warning text default state
- * @desc 警戒色的文本默认态
- * @descEN The default state of the text in the warning color.
- */
- colorWarningText: string; // 9
-
- /**
- * @nameZH 警戒色的文本激活态
- * @nameEN Warning text active state
- * @desc 警戒色的文本激活态
- * @descEN The active state of the text in the warning color.
- */
- colorWarningTextActive: string; // 10
-}
-
-interface ColorInfoMapToken {
- /**
- * @nameZH 信息色的浅色背景颜色
- * @nameEN Light background color of information color
- * @desc 信息色的浅色背景颜色。
- * @descEN Light background color of information color.
- */
- colorInfoBg: string; // 1
-
- /**
- * @nameZH 信息色的浅色背景色悬浮态
- * @nameEN Hover state of light background color of information color
- * @desc 信息色的浅色背景色悬浮态。
- * @descEN Hover state of light background color of information color.
- */
- colorInfoBgHover: string; // 2
-
- /**
- * @nameZH 信息色的描边色
- * @nameEN Border color of information color
- * @desc 信息色的描边色。
- * @descEN Border color of information color.
- */
- colorInfoBorder: string; // 3
-
- /**
- * @nameZH 信息色的描边色悬浮态
- * @nameEN Hover state of border color of information color
- * @desc 信息色的描边色悬浮态。
- * @descEN Hover state of border color of information color.
- */
- colorInfoBorderHover: string; // 4
-
- /**
- * @nameZH 信息色的深色悬浮态
- * @nameEN Hover state of dark color of information color
- * @desc 信息色的深色悬浮态。
- * @descEN Hover state of dark color of information color.
- */
- colorInfoHover: string; // 5
-
- /**
- * @nameZH 信息色
- * @nameEN Information color
- * @desc 信息色。
- * @descEN Information color.
- */
- colorInfo: string; // 6
-
- /**
- * @nameZH 信息色的深色激活态
- * @nameEN Active state of dark color of information color
- * @desc 信息色的深色激活态。
- * @descEN Active state of dark color of information color.
- */
- colorInfoActive: string; // 7
-
- /**
- * @nameZH 信息色的文本悬浮态
- * @nameEN Hover state of text color of information color
- * @desc 信息色的文本悬浮态。
- * @descEN Hover state of text color of information color.
- */
- colorInfoTextHover: string; // 8
-
- /**
- * @nameZH 信息色的文本默认态
- * @nameEN Default state of text color of information color
- * @desc 信息色的文本默认态。
- * @descEN Default state of text color of information color.
- */
- colorInfoText: string; // 9
-
- /**
- * @nameZH 信息色的文本激活态
- * @nameEN Active state of text color of information color
- * @desc 信息色的文本激活态。
- * @descEN Active state of text color of information color.
- */
- colorInfoTextActive: string; // 10
-}
-
-interface ColorErrorMapToken {
- /**
- * @nameZH 错误色的浅色背景颜色
- * @nameEN Error background color
- * @desc 错误色的浅色背景颜色
- * @descEN The background color of the error state.
- */
- colorErrorBg: string; // 1
-
- /**
- * @nameZH 错误色的浅色背景色悬浮态
- * @nameEN Error background color hover state
- * @desc 错误色的浅色背景色悬浮态
- * @descEN The hover state background color of the error state.
- */
- colorErrorBgHover: string; // 2
-
- /**
- * @nameZH 错误色的描边色
- * @nameEN Error border color
- * @desc 错误色的描边色
- * @descEN The border color of the error state.
- */
- colorErrorBorder: string; // 3
-
- /**
- * @nameZH 错误色的描边色悬浮态
- * @nameEN Error border color hover state
- * @desc 错误色的描边色悬浮态
- * @descEN The hover state border color of the error state.
- */
- colorErrorBorderHover: string; // 4
-
- /**
- * @nameZH 错误色的深色悬浮态
- * @nameEN Error hover color
- * @desc 错误色的深色悬浮态
- * @descEN The hover state of the error color.
- */
- colorErrorHover: string; // 5
-
- /**
- * @nameZH 错误色
- * @nameEN Error color
- * @desc 错误色
- * @descEN The color of the error state.
- */
- colorError: string; // 6
-
- /**
- * @nameZH 错误色的深色激活态
- * @nameEN Error active color
- * @desc 错误色的深色激活态
- * @descEN The active state of the error color.
- */
- colorErrorActive: string; // 7
-
- /**
- * @nameZH 错误色的文本悬浮态
- * @nameEN Error text hover state
- * @desc 错误色的文本悬浮态
- * @descEN The hover state of the text in the error color.
- */
- colorErrorTextHover: string; // 8
-
- /**
- * @nameZH 错误色的文本默认态
- * @nameEN Error text default state
- * @desc 错误色的文本默认态
- * @descEN The default state of the text in the error color.
- */
- colorErrorText: string; // 9
-
- /**
- * @nameZH 错误色的文本激活态
- * @nameEN Error text active state
- * @desc 错误色的文本激活态
- * @descEN The active state of the text in the error color.
- */
- colorErrorTextActive: string; // 10
-}
-
-export interface ColorLinkMapToken {
- /**
- * @nameZH 超链接颜色
- * @nameEN Hyperlink color
- * @desc 控制超链接的颜色。
- * @descEN Control the color of hyperlink.
- */
- colorLink: string;
- /**
- * @nameZH 超链接悬浮颜色
- * @nameEN Hyperlink hover color
- * @desc 控制超链接悬浮时的颜色。
- * @descEN Control the color of hyperlink when hovering.
- */
- colorLinkHover: string;
- /**
- * @nameZH 超链接激活颜色
- * @nameEN Hyperlink active color
- * @desc 控制超链接被点击时的颜色。
- * @descEN Control the color of hyperlink when clicked.
- */
- colorLinkActive: string;
-}
-
-export interface ColorMapToken
- extends ColorNeutralMapToken,
- ColorPrimaryMapToken,
- ColorSuccessMapToken,
- ColorWarningMapToken,
- ColorErrorMapToken,
- ColorInfoMapToken,
- ColorLinkMapToken {
- /**
- * @nameZH 纯白色
- * @desc 不随主题变化的纯白色
- * @descEN Pure white color don't changed by theme
- * @default #FFFFFF
- */
- colorWhite: string;
-
- /**
- * @nameZH 浮层的背景蒙层颜色
- * @nameEN Background color of the mask
- * @desc 浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer 等组件的蒙层使用的是该 token
- * @descEN The background color of the mask, used to cover the content below the mask, Modal, Drawer and other components use this token
- */
- colorBgMask: string;
-
- /**
- * @nameZH 纯黑色
- * @desc 不随主题变化的纯黑色
- * @default #0000
- */
- // colorBlack: string;
-}
diff --git a/components/_theme/interface/maps/font.ts b/components/_theme/interface/maps/font.ts
deleted file mode 100644
index 40ed00716f..0000000000
--- a/components/_theme/interface/maps/font.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-export interface FontMapToken {
- // Font Size
- /**
- * @desc 小号字体大小
- * @descEN Small font size
- */
- fontSizeSM: number;
- /**
- * @desc 标准字体大小
- * @descEN Standard font size
- */
- fontSize: number;
- /**
- * @desc 大号字体大小
- * @descEN Large font size
- */
- fontSizeLG: number;
- /**
- * @desc 超大号字体大小
- * @descEN Super large font size
- */
- fontSizeXL: number;
-
- /**
- * @nameZH 一级标题字号
- * @nameEN Font size of heading level 1
- * @desc H1 标签所使用的字号
- * @descEN Font size of h1 tag.
- * @default 38
- */
- fontSizeHeading1: number;
- /**
- * @nameZH 二级标题字号
- * @nameEN Font size of heading level 2
- * @desc h2 标签所使用的字号
- * @descEN Font size of h2 tag.
- * @default 30
- */
- fontSizeHeading2: number;
- /**
- * @nameZH 三级标题字号
- * @nameEN Font size of heading level 3
- * @desc h3 标签使用的字号
- * @descEN Font size of h3 tag.
- * @default 24
- */
- fontSizeHeading3: number;
- /**
- * @nameZH 四级标题字号
- * @nameEN Font size of heading level 4
- * @desc h4 标签使用的字号
- * @descEN Font size of h4 tag.
- * @default 20
- */
- fontSizeHeading4: number;
- /**
- * @nameZH 五级标题字号
- * @nameEN Font size of heading level 5
- * @desc h5 标签使用的字号
- * @descEN Font size of h5 tag.
- * @default 16
- */
- fontSizeHeading5: number;
-
- // LineHeight
- /**
- * @desc 文本行高
- * @descEN Line height of text.
- */
- lineHeight: number;
- /**
- * @desc 大型文本行高
- * @descEN Line height of large text.
- */
- lineHeightLG: number;
- /**
- * @desc 小型文本行高
- * @descEN Line height of small text.
- */
- lineHeightSM: number;
-
- // TextHeight
- /**
- * Round of fontSize * lineHeight
- * @internal
- */
- fontHeight: number;
- /**
- * Round of fontSizeSM * lineHeightSM
- * @internal
- */
- fontHeightSM: number;
- /**
- * Round of fontSizeLG * lineHeightLG
- * @internal
- */
- fontHeightLG: number;
-
- /**
- * @nameZH 一级标题行高
- * @nameEN Line height of heading level 1
- * @desc H1 标签所使用的行高
- * @descEN Line height of h1 tag.
- * @default 1.4
- */
- lineHeightHeading1: number;
- /**
- * @nameZH 二级标题行高
- * @nameEN Line height of heading level 2
- * @desc h2 标签所使用的行高
- * @descEN Line height of h2 tag.
- * @default 1.35
- */
- lineHeightHeading2: number;
- /**
- * @nameZH 三级标题行高
- * @nameEN Line height of heading level 3
- * @desc h3 标签所使用的行高
- * @descEN Line height of h3 tag.
- * @default 1.3
- */
- lineHeightHeading3: number;
- /**
- * @nameZH 四级标题行高
- * @nameEN Line height of heading level 4
- * @desc h4 标签所使用的行高
- * @descEN Line height of h4 tag.
- * @default 1.25
- */
- lineHeightHeading4: number;
- /**
- * @nameZH 五级标题行高
- * @nameEN Line height of heading level 5
- * @desc h5 标签所使用的行高
- * @descEN Line height of h5 tag.
- * @default 1.2
- */
- lineHeightHeading5: number;
-}
diff --git a/components/_theme/interface/maps/index.ts b/components/_theme/interface/maps/index.ts
deleted file mode 100644
index 29d3f53d74..0000000000
--- a/components/_theme/interface/maps/index.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { ColorPalettes, LegacyColorPalettes } from '../presetColors';
-import type { SeedToken } from '../seeds';
-import type { ColorMapToken } from './colors';
-import type { FontMapToken } from './font';
-import type { HeightMapToken, SizeMapToken } from './size';
-import type { StyleMapToken } from './style';
-
-export * from './colors';
-export * from './font';
-export * from './size';
-export * from './style';
-
-export interface CommonMapToken extends StyleMapToken {
- // Motion
- /**
- * @desc 动效播放速度，快速。用于小型元素动画交互
- * @descEN Motion speed, fast speed. Used for small element animation interaction.
- */
- motionDurationFast: string;
- /**
- * @desc 动效播放速度，中速。用于中型元素动画交互
- * @descEN Motion speed, medium speed. Used for medium element animation interaction.
- */
- motionDurationMid: string;
- /**
- * @desc 动效播放速度，慢速。用于大型元素如面板动画交互
- * @descEN Motion speed, slow speed. Used for large element animation interaction.
- */
- motionDurationSlow: string;
-}
-
-// ======================================================================
-// == Map Token ==
-// ======================================================================
-// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
-
-export interface MapToken
- extends SeedToken,
- ColorPalettes,
- LegacyColorPalettes,
- ColorMapToken,
- SizeMapToken,
- HeightMapToken,
- StyleMapToken,
- FontMapToken,
- CommonMapToken {}
diff --git a/components/_theme/interface/maps/size.ts b/components/_theme/interface/maps/size.ts
deleted file mode 100644
index f69f5a9278..0000000000
--- a/components/_theme/interface/maps/size.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-export interface SizeMapToken {
- /**
- * @nameZH XXL
- * @default 48
- */
- sizeXXL: number;
- /**
- * @nameZH XL
- * @default 32
- */
- sizeXL: number;
- /**
- * @nameZH LG
- * @default 24
- */
- sizeLG: number;
- /**
- * @nameZH MD
- * @default 20
- */
- sizeMD: number;
- /** Same as size by default, but could be larger in compact mode */
- sizeMS: number;
- /**
- * @nameZH 默认
- * @desc 默认尺寸
- * @default 16
- */
- size: number;
- /**
- * @nameZH SM
- * @default 12
- */
- sizeSM: number;
- /**
- * @nameZH XS
- * @default 8
- */
- sizeXS: number;
- /**
- * @nameZH XXS
- * @default 4
- */
- sizeXXS: number;
-}
-
-export interface HeightMapToken {
- // Control
- /** Only Used for control inside component like Multiple Select inner selection item */
-
- /**
- * @nameZH 更小的组件高度
- * @nameEN XS component height
- * @desc 更小的组件高度
- * @descEN XS component height
- */
- controlHeightXS: number;
-
- /**
- * @nameZH 较小的组件高度
- * @nameEN SM component height
- * @desc 较小的组件高度
- * @descEN SM component height
- */
- controlHeightSM: number;
-
- /**
- * @nameZH 较高的组件高度
- * @nameEN LG component height
- * @desc 较高的组件高度
- * @descEN LG component height
- */
- controlHeightLG: number;
-}
diff --git a/components/_theme/interface/maps/style.ts b/components/_theme/interface/maps/style.ts
deleted file mode 100644
index e4faf7dac8..0000000000
--- a/components/_theme/interface/maps/style.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export interface StyleMapToken {
- /**
- * @nameZH 线宽
- * @nameEN Line Width
- * @desc 描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。
- * @descEN The default line width of the outline class components, such as Button, Input, Select, etc.
- * @default 1
- */
- lineWidthBold: number;
-
- /**
- * @nameZH XS号圆角
- * @nameEN XS Border Radius
- * @desc XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。
- * @descEN XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius.
- * @default 2
- */
- borderRadiusXS: number;
- /**
- * @nameZH SM号圆角
- * @nameEN SM Border Radius
- * @desc SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角
- * @descEN SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size
- * @default 4
- */
- borderRadiusSM: number;
- /**
- * @nameZH LG号圆角
- * @nameEN LG Border Radius
- * @desc LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。
- * @descEN LG size border radius, used in some large border radius components, such as Card, Modal and other components.
- * @default 8
- */
- borderRadiusLG: number;
- /**
- * @nameZH 外部圆角
- * @nameEN Outer Border Radius
- * @default 4
- * @desc 外部圆角
- * @descEN Outer border radius
- */
- borderRadiusOuter: number;
-}
diff --git a/components/_theme/interface/presetColors.ts b/components/_theme/interface/presetColors.ts
deleted file mode 100644
index e160935e6b..0000000000
--- a/components/_theme/interface/presetColors.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export const PresetColors = [
- 'blue',
- 'purple',
- 'cyan',
- 'green',
- 'magenta',
- 'pink',
- 'red',
- 'orange',
- 'yellow',
- 'volcano',
- 'geekblue',
- 'lime',
- 'gold',
-] as const;
-
-export type PresetColorKey = (typeof PresetColors)[number];
-
-export type PresetColorType = Record<PresetColorKey, string>;
-
-type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-
-export type LegacyColorPalettes = {
- /**
- * @deprecated
- */
- [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
-};
-
-export type ColorPalettes = {
- [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string;
-};
diff --git a/components/_theme/interface/seeds.ts b/components/_theme/interface/seeds.ts
deleted file mode 100644
index e7ac8a234d..0000000000
--- a/components/_theme/interface/seeds.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-import type { PresetColorType } from './presetColors';
-// ======================================================================
-// == Seed Token ==
-// ======================================================================
-// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
-
-export interface SeedToken extends PresetColorType {
- // ---------- Color ---------- //
-
- /**
- * @nameZH 品牌主色
- * @nameEN Brand Color
- * @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义
- * @descEN Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
- */
- colorPrimary: string;
-
- /**
- * @nameZH 成功色
- * @nameEN Success Color
- * @desc 用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。
- * @descEN Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.
- */
- colorSuccess: string;
-
- /**
- * @nameZH 警戒色
- * @nameEN Warning Color
- * @desc 用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。
- * @descEN Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.
- */
- colorWarning: string;
-
- /**
- * @nameZH 错误色
- * @nameEN Error Color
- * @desc 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。
- * @descEN Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.
- */
- colorError: string;
-
- /**
- * @nameZH 信息色
- * @nameEN Info Color
- * @desc 用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。
- * @descEN Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.
- */
- colorInfo: string;
-
- /**
- * @nameZH 基础文本色
- * @nameEN Seed Text Color
- * @desc 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
- * @descEN Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
- */
- colorTextBase: string;
-
- /**
- * @nameZH 基础背景色
- * @nameEN Seed Background Color
- * @desc 用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
- * @descEN Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
- */
- colorBgBase: string;
-
- /**
- * @nameZH 超链接颜色
- * @nameEN Hyperlink color
- * @desc 控制超链接的颜色。
- * @descEN Control the color of hyperlink.
- */
- colorLink: string;
-
- // ---------- Font ---------- //
-
- /**
- * @nameZH 字体
- * @nameEN Font family for default text
- * @desc Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。
- * @descEN The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.
- */
- fontFamily: string;
-
- /**
- * @nameZH 代码字体
- * @nameEN Font family for code text
- * @desc 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素
- * @descEN Code font, used for code, pre and kbd elements in Typography
- */
- fontFamilyCode: string;
-
- /**
- * @nameZH 默认字号
- * @nameEN Default Font Size
- * @desc 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。
- * @descEN The most widely used font size in the design system, from which the text gradient will be derived.
- * @default 14
- */
- fontSize: number;
-
- // ---------- Line ---------- //
-
- /**
- * @nameZH 基础线宽
- * @nameEN Base Line Width
- * @desc 用于控制组件边框、分割线等的宽度
- * @descEN Border width of base components
- */
- lineWidth: number;
-
- /**
- * @nameZH 线条样式
- * @nameEN Line Style
- * @desc 用于控制组件边框、分割线等的样式，默认是实线
- * @descEN Border style of base components
- */
- lineType: string;
-
- // ---------- BorderRadius ---------- //
-
- /**
- * @nameZH 基础圆角
- * @nameEN Base Border Radius
- * @descEN Border radius of base components
- * @desc 基础组件的圆角大小，例如按钮、输入框、卡片等
- */
- borderRadius: number;
-
- // ---------- Size ---------- //
-
- /**
- * @nameZH 尺寸变化单位
- * @nameEN Size Change Unit
- * @desc 用于控制组件尺寸的变化单位，在 Ant Design 中我们的基础单位为 4 ，便于更加细致地控制尺寸梯度
- * @descEN The unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size step
- * @default 4
- */
- sizeUnit: number;
-
- /**
- * @nameZH 尺寸步长
- * @nameEN Size Base Step
- * @desc 用于控制组件尺寸的基础步长，尺寸步长结合尺寸变化单位，就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式，例如 V5 紧凑模式下的尺寸步长为 2
- * @descEN The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2
- * @default 4
- */
- sizeStep: number;
-
- /**
- * @nameZH 组件箭头尺寸
- * @desc 组件箭头的尺寸
- * @descEN The size of the component arrow
- */
- sizePopupArrow: number;
-
- /**
- * @nameZH 基础高度
- * @nameEN Base Control Height
- * @desc Ant Design 中按钮和输入框等基础控件的高度
- * @descEN The height of the basic controls such as buttons and input boxes in Ant Design
- * @default 32
- */
- controlHeight: number;
-
- // ---------- zIndex ---------- //
-
- /**
- * @nameZH 基础 zIndex
- * @nameEN Base zIndex
- * @desc 所有组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 BackTop、 Affix 等
- * @descEN The base Z axis value of all components, which can be used to control the level of some floating components based on the Z axis value, such as BackTop, Affix, etc.
- *
- * @default 0
- */
- zIndexBase: number;
-
- /**
- * @nameZH 浮层基础 zIndex
- * @nameEN popup base zIndex
- * @desc 浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等
- * @descEN Base zIndex of component like FloatButton, Affix which can be cover by large popup
- * @default 1000
- */
- zIndexPopupBase: number;
-
- // ---------- Opacity ---------- //
-
- /**
- * @nameZH 图片不透明度
- * @nameEN Define default Image opacity. Useful when in dark-like theme
- */
- opacityImage: number;
-
- // ---------- motion ---------- //
- // TODO: 缺一个懂 motion 的人来收敛 Motion 相关的 Token
-
- /**
- * @nameZH 动画时长变化单位
- * @nameEN Animation Duration Unit
- * @desc 用于控制动画时长的变化单位
- * @descEN The unit of animation duration change
- * @default 100ms
- */
- motionUnit: number;
-
- /**
- * @nameZH 动画基础时长。
- * @nameEN Animation Base Duration.
- */
- motionBase: number;
-
- /**
- * @desc 预设动效曲率
- * @descEN Preset motion curve.
- */
- motionEaseOutCirc: string;
-
- /**
- * @desc 预设动效曲率
- * @descEN Preset motion curve.
- */
- motionEaseInOutCirc: string;
-
- /**
- * @desc 预设动效曲率
- * @descEN Preset motion curve.
- */
- motionEaseInOut: string;
-
- /**
- * @desc 预设动效曲率
- * @descEN Preset motion curve.
- */
- motionEaseOutBack: string;
-
- /**
- * @desc 预设动效曲率
- * @descEN Preset motion curve.
- */
- motionEaseInBack: string;
-
- /**
- * @desc 预设动效曲率
- * @descEN Preset motion curve.
- */
- motionEaseInQuint: string;
-
- /**
- * @desc 预设动效曲率
- * @descEN Preset motion curve.
- */
- motionEaseOutQuint: string;
-
- /**
- * @desc 预设动效曲率
- * @descEN Preset motion curve.
- */
- motionEaseOut: string;
-
- // ---------- Style ---------- //
-
- /**
- * @nameZH 线框风格
- * @nameEN Wireframe Style
- * @desc 用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项
- * @descEN Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item
- * @default false
- */
- wireframe: boolean;
-
- /**
- * @nameZH 动画风格
- * @nameEN Motion Style
- * @desc 用于配置动画效果，为 `false` 时则关闭动画
- * @descEN Used to configure the motion effect, when it is `false`, the motion is turned off
- * @default false
- */
- motion: boolean;
-}
diff --git a/components/_theme/internal.ts b/components/_theme/internal.ts
deleted file mode 100644
index a3061cd60f..0000000000
--- a/components/_theme/internal.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useStyleRegister } from '../_util/_cssinjs';
-
-import type {
- AliasToken,
- GenerateStyle,
- PresetColorKey,
- PresetColorType,
- SeedToken,
- UseComponentStyleResult,
-} from './interface';
-import { PresetColors } from './interface';
-import useToken from './useToken';
-import type { FullToken, GetDefaultToken } from './util/genComponentStyleHook';
-import genComponentStyleHook, {
- genSubStyleComponent,
- genStyleHooks,
-} from './util/genComponentStyleHook';
-import genPresetColor from './util/genPresetColor';
-import statisticToken, { merge as mergeToken } from './util/statistic';
-import useResetIconStyle from './util/useResetIconStyle';
-import calc from './util/calc';
-import { getLineHeight } from './themes/shared/genFontSizes';
-
-export { defaultConfig, DesignTokenProvider } from './context';
-export {
- PresetColors,
- genComponentStyleHook,
- genSubStyleComponent,
- genPresetColor,
- genStyleHooks,
- mergeToken,
- statisticToken,
- calc,
- getLineHeight,
- // hooks
- useResetIconStyle,
- useStyleRegister,
- useToken,
-};
-export type {
- AliasToken,
- // FIXME: Remove this type
- AliasToken as DerivativeToken,
- FullToken,
- GenerateStyle,
- PresetColorKey,
- PresetColorType,
- SeedToken,
- UseComponentStyleResult,
- GetDefaultToken,
-};
diff --git a/components/_theme/themes/ColorMap.ts b/components/_theme/themes/ColorMap.ts
deleted file mode 100644
index 0a68210767..0000000000
--- a/components/_theme/themes/ColorMap.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { ColorNeutralMapToken } from '../interface';
-
-export interface ColorMap {
- 1: string;
- 2: string;
- 3: string;
- 4: string;
- 5: string;
- 6: string;
- 7: string;
- 8: string;
- 9: string;
- 10: string;
-}
-
-export type GenerateColorMap = (baseColor: string) => ColorMap;
-export type GenerateNeutralColorMap = (
- bgBaseColor: string,
- textBaseColor: string,
-) => ColorNeutralMapToken;
diff --git a/components/_theme/themes/compact/genCompactSizeMapToken.ts b/components/_theme/themes/compact/genCompactSizeMapToken.ts
deleted file mode 100644
index b473808eca..0000000000
--- a/components/_theme/themes/compact/genCompactSizeMapToken.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { SeedToken, SizeMapToken } from '../../interface';
-
-export default function genSizeMapToken(token: SeedToken): SizeMapToken {
- const { sizeUnit, sizeStep } = token;
-
- const compactSizeStep = sizeStep - 2;
-
- return {
- sizeXXL: sizeUnit * (compactSizeStep + 10),
- sizeXL: sizeUnit * (compactSizeStep + 6),
- sizeLG: sizeUnit * (compactSizeStep + 2),
- sizeMD: sizeUnit * (compactSizeStep + 2),
- sizeMS: sizeUnit * (compactSizeStep + 1),
- size: sizeUnit * compactSizeStep,
- sizeSM: sizeUnit * compactSizeStep,
- sizeXS: sizeUnit * (compactSizeStep - 1),
- sizeXXS: sizeUnit * (compactSizeStep - 1),
- };
-}
diff --git a/components/_theme/themes/compact/index.ts b/components/_theme/themes/compact/index.ts
deleted file mode 100644
index 5980b9dc2c..0000000000
--- a/components/_theme/themes/compact/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { DerivativeFunc } from '../../../_util/_cssinjs';
-import genControlHeight from '../shared/genControlHeight';
-import type { MapToken, SeedToken } from '../../interface';
-import defaultAlgorithm from '../default';
-import genCompactSizeMapToken from './genCompactSizeMapToken';
-import genFontMapToken from '../shared/genFontMapToken';
-
-const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
- const mergedMapToken = mapToken ?? defaultAlgorithm(token);
-
- const fontSize = mergedMapToken.fontSizeSM; // Smaller size font-size as base
- const controlHeight = mergedMapToken.controlHeight - 4;
-
- return {
- ...mergedMapToken,
- ...genCompactSizeMapToken(mapToken ?? token),
-
- // font
- ...genFontMapToken(fontSize),
-
- // controlHeight
- controlHeight,
- ...genControlHeight({ ...mergedMapToken, controlHeight }),
- };
-};
-
-export default derivative;
diff --git a/components/_theme/themes/dark/colorAlgorithm.ts b/components/_theme/themes/dark/colorAlgorithm.ts
deleted file mode 100644
index cf395bc0ab..0000000000
--- a/components/_theme/themes/dark/colorAlgorithm.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-
-export const getAlphaColor = (baseColor: string, alpha: number) =>
- new TinyColor(baseColor).setAlpha(alpha).toRgbString();
-
-export const getSolidColor = (baseColor: string, brightness: number) => {
- const instance = new TinyColor(baseColor);
- return instance.lighten(brightness).toHexString();
-};
diff --git a/components/_theme/themes/dark/colors.ts b/components/_theme/themes/dark/colors.ts
deleted file mode 100644
index b3342c99a8..0000000000
--- a/components/_theme/themes/dark/colors.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { generate } from '@ant-design/colors';
-import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
-import { getAlphaColor, getSolidColor } from './colorAlgorithm';
-
-export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
- const colors = generate(baseColor, { theme: 'dark' });
- return {
- 1: colors[0],
- 2: colors[1],
- 3: colors[2],
- 4: colors[3],
- 5: colors[6],
- 6: colors[5],
- 7: colors[4],
- 8: colors[6],
- 9: colors[5],
- 10: colors[4],
- // 8: colors[9],
- // 9: colors[8],
- // 10: colors[7],
- };
-};
-
-export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
- bgBaseColor: string,
- textBaseColor: string,
-) => {
- const colorBgBase = bgBaseColor || '#000';
- const colorTextBase = textBaseColor || '#fff';
-
- return {
- colorBgBase,
- colorTextBase,
-
- colorText: getAlphaColor(colorTextBase, 0.85),
- colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
- colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
- colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
-
- colorFill: getAlphaColor(colorTextBase, 0.18),
- colorFillSecondary: getAlphaColor(colorTextBase, 0.12),
- colorFillTertiary: getAlphaColor(colorTextBase, 0.08),
- colorFillQuaternary: getAlphaColor(colorTextBase, 0.04),
-
- colorBgElevated: getSolidColor(colorBgBase, 12),
- colorBgContainer: getSolidColor(colorBgBase, 8),
- colorBgLayout: getSolidColor(colorBgBase, 0),
- colorBgSpotlight: getSolidColor(colorBgBase, 26),
- colorBgBlur: getAlphaColor(colorTextBase, 0.04),
-
- colorBorder: getSolidColor(colorBgBase, 26),
- colorBorderSecondary: getSolidColor(colorBgBase, 19),
- };
-};
diff --git a/components/_theme/themes/dark/index.ts b/components/_theme/themes/dark/index.ts
deleted file mode 100644
index 69e16a063b..0000000000
--- a/components/_theme/themes/dark/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { generate } from '@ant-design/colors';
-import type { DerivativeFunc } from '../../../_util/_cssinjs';
-import type {
- ColorPalettes,
- LegacyColorPalettes,
- MapToken,
- PresetColorType,
- SeedToken,
-} from '../../interface';
-import { defaultPresetColors } from '../seed';
-import genColorMapToken from '../shared/genColorMapToken';
-import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
-import defaultAlgorithm from '../default';
-
-const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
- const colorPalettes = Object.keys(defaultPresetColors)
- .map((colorKey: keyof PresetColorType) => {
- const colors = generate(token[colorKey], { theme: 'dark' });
-
- return new Array(10).fill(1).reduce((prev, _, i) => {
- prev[`${colorKey}-${i + 1}`] = colors[i];
- prev[`${colorKey}${i + 1}`] = colors[i];
- return prev;
- }, {}) as ColorPalettes & LegacyColorPalettes;
- })
- .reduce((prev, cur) => {
- prev = {
- ...prev,
- ...cur,
- };
- return prev;
- }, {} as ColorPalettes & LegacyColorPalettes);
-
- const mergedMapToken = mapToken ?? defaultAlgorithm(token);
-
- return {
- ...mergedMapToken,
-
- // Dark tokens
- ...colorPalettes,
- // Colors
- ...genColorMapToken(token, {
- generateColorPalettes,
- generateNeutralColorPalettes,
- }),
- };
-};
-
-export default derivative;
diff --git a/components/_theme/themes/default/colorAlgorithm.ts b/components/_theme/themes/default/colorAlgorithm.ts
deleted file mode 100644
index 5ab75e6b1f..0000000000
--- a/components/_theme/themes/default/colorAlgorithm.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-
-export const getAlphaColor = (baseColor: string, alpha: number) =>
- new TinyColor(baseColor).setAlpha(alpha).toRgbString();
-
-export const getSolidColor = (baseColor: string, brightness: number) => {
- const instance = new TinyColor(baseColor);
- return instance.darken(brightness).toHexString();
-};
diff --git a/components/_theme/themes/default/colors.ts b/components/_theme/themes/default/colors.ts
deleted file mode 100644
index d0e684dd49..0000000000
--- a/components/_theme/themes/default/colors.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { generate } from '@ant-design/colors';
-import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
-import { getAlphaColor, getSolidColor } from './colorAlgorithm';
-
-export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
- const colors = generate(baseColor);
- return {
- 1: colors[0],
- 2: colors[1],
- 3: colors[2],
- 4: colors[3],
- 5: colors[4],
- 6: colors[5],
- 7: colors[6],
- 8: colors[4],
- 9: colors[5],
- 10: colors[6],
- // 8: colors[7],
- // 9: colors[8],
- // 10: colors[9],
- };
-};
-
-export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
- bgBaseColor: string,
- textBaseColor: string,
-) => {
- const colorBgBase = bgBaseColor || '#fff';
- const colorTextBase = textBaseColor || '#000';
-
- return {
- colorBgBase,
- colorTextBase,
-
- colorText: getAlphaColor(colorTextBase, 0.88),
- colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
- colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
- colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
-
- colorFill: getAlphaColor(colorTextBase, 0.15),
- colorFillSecondary: getAlphaColor(colorTextBase, 0.06),
- colorFillTertiary: getAlphaColor(colorTextBase, 0.04),
- colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),
-
- colorBgLayout: getSolidColor(colorBgBase, 4),
- colorBgContainer: getSolidColor(colorBgBase, 0),
- colorBgElevated: getSolidColor(colorBgBase, 0),
- colorBgSpotlight: getAlphaColor(colorTextBase, 0.85),
- colorBgBlur: 'transparent',
-
- colorBorder: getSolidColor(colorBgBase, 15),
- colorBorderSecondary: getSolidColor(colorBgBase, 6),
- };
-};
diff --git a/components/_theme/themes/default/index.ts b/components/_theme/themes/default/index.ts
deleted file mode 100644
index d558e2cf87..0000000000
--- a/components/_theme/themes/default/index.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { generate } from '@ant-design/colors';
-import genControlHeight from '../shared/genControlHeight';
-import genSizeMapToken from '../shared/genSizeMapToken';
-import type {
- ColorPalettes,
- LegacyColorPalettes,
- MapToken,
- PresetColorType,
- SeedToken,
-} from '../../interface';
-import { defaultPresetColors } from '../seed';
-import genColorMapToken from '../shared/genColorMapToken';
-import genCommonMapToken from '../shared/genCommonMapToken';
-import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
-import genFontMapToken from '../shared/genFontMapToken';
-
-export default function derivative(token: SeedToken): MapToken {
- const colorPalettes = Object.keys(defaultPresetColors)
- .map((colorKey: keyof PresetColorType) => {
- const colors = generate(token[colorKey]);
-
- return new Array(10).fill(1).reduce((prev, _, i) => {
- prev[`${colorKey}-${i + 1}`] = colors[i];
- prev[`${colorKey}${i + 1}`] = colors[i];
- return prev;
- }, {}) as ColorPalettes & LegacyColorPalettes;
- })
- .reduce((prev, cur) => {
- prev = {
- ...prev,
- ...cur,
- };
- return prev;
- }, {} as ColorPalettes & LegacyColorPalettes);
-
- return {
- ...token,
- ...colorPalettes,
- // Colors
- ...genColorMapToken(token, {
- generateColorPalettes,
- generateNeutralColorPalettes,
- }),
- // Font
- ...genFontMapToken(token.fontSize),
- // Size
- ...genSizeMapToken(token),
- // Height
- ...genControlHeight(token),
- // Others
- ...genCommonMapToken(token),
- };
-}
diff --git a/components/_theme/themes/seed.ts b/components/_theme/themes/seed.ts
deleted file mode 100644
index e24925bbf7..0000000000
--- a/components/_theme/themes/seed.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import type { PresetColorType, SeedToken } from '../internal';
-
-export const defaultPresetColors: PresetColorType = {
- blue: '#1677ff',
- purple: '#722ED1',
- cyan: '#13C2C2',
- green: '#52C41A',
- magenta: '#EB2F96',
- pink: '#eb2f96',
- red: '#F5222D',
- orange: '#FA8C16',
- yellow: '#FADB14',
- volcano: '#FA541C',
- geekblue: '#2F54EB',
- gold: '#FAAD14',
- lime: '#A0D911',
-};
-
-const seedToken: SeedToken = {
- // preset color palettes
- ...defaultPresetColors,
-
- // Color
- colorPrimary: '#1677ff',
- colorSuccess: '#52c41a',
- colorWarning: '#faad14',
- colorError: '#ff4d4f',
- colorInfo: '#1677ff',
- colorLink: '',
- colorTextBase: '',
-
- colorBgBase: '',
-
- // Font
- fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-'Noto Color Emoji'`,
- fontFamilyCode: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
- fontSize: 14,
-
- // Line
- lineWidth: 1,
- lineType: 'solid',
-
- // Motion
- motionUnit: 0.1,
- motionBase: 0,
- motionEaseOutCirc: 'cubic-bezier(0.08, 0.82, 0.17, 1)',
- motionEaseInOutCirc: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
- motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
- motionEaseInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
- motionEaseOutBack: 'cubic-bezier(0.12, 0.4, 0.29, 1.46)',
- motionEaseInBack: 'cubic-bezier(0.71, -0.46, 0.88, 0.6)',
- motionEaseInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
- motionEaseOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
-
- // Radius
- borderRadius: 6,
-
- // Size
- sizeUnit: 4,
- sizeStep: 4,
- sizePopupArrow: 16,
-
- // Control Base
- controlHeight: 32,
-
- // zIndex
- zIndexBase: 0,
- zIndexPopupBase: 1000,
-
- // Image
- opacityImage: 1,
-
- // Wireframe
- wireframe: false,
-
- // Motion
- motion: true,
-};
-export default seedToken;
diff --git a/components/_theme/themes/shared/genColorMapToken.ts b/components/_theme/themes/shared/genColorMapToken.ts
deleted file mode 100644
index 3a3aa8d6db..0000000000
--- a/components/_theme/themes/shared/genColorMapToken.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-import type { ColorMapToken, SeedToken } from '../../interface';
-import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
-
-interface PaletteGenerators {
- generateColorPalettes: GenerateColorMap;
- generateNeutralColorPalettes: GenerateNeutralColorMap;
-}
-
-export default function genColorMapToken(
- seed: SeedToken,
- { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators,
-): ColorMapToken {
- const {
- colorSuccess: colorSuccessBase,
- colorWarning: colorWarningBase,
- colorError: colorErrorBase,
- colorInfo: colorInfoBase,
- colorPrimary: colorPrimaryBase,
- colorBgBase,
- colorTextBase,
- } = seed;
-
- const primaryColors = generateColorPalettes(colorPrimaryBase);
- const successColors = generateColorPalettes(colorSuccessBase);
- const warningColors = generateColorPalettes(colorWarningBase);
- const errorColors = generateColorPalettes(colorErrorBase);
- const infoColors = generateColorPalettes(colorInfoBase);
- const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
-
- // Color Link
- const colorLink = seed.colorLink || seed.colorInfo;
- const linkColors = generateColorPalettes(colorLink);
-
- return {
- ...neutralColors,
-
- colorPrimaryBg: primaryColors[1],
- colorPrimaryBgHover: primaryColors[2],
- colorPrimaryBorder: primaryColors[3],
- colorPrimaryBorderHover: primaryColors[4],
- colorPrimaryHover: primaryColors[5],
- colorPrimary: primaryColors[6],
- colorPrimaryActive: primaryColors[7],
- colorPrimaryTextHover: primaryColors[8],
- colorPrimaryText: primaryColors[9],
- colorPrimaryTextActive: primaryColors[10],
-
- colorSuccessBg: successColors[1],
- colorSuccessBgHover: successColors[2],
- colorSuccessBorder: successColors[3],
- colorSuccessBorderHover: successColors[4],
- colorSuccessHover: successColors[4],
- colorSuccess: successColors[6],
- colorSuccessActive: successColors[7],
- colorSuccessTextHover: successColors[8],
- colorSuccessText: successColors[9],
- colorSuccessTextActive: successColors[10],
-
- colorErrorBg: errorColors[1],
- colorErrorBgHover: errorColors[2],
- colorErrorBorder: errorColors[3],
- colorErrorBorderHover: errorColors[4],
- colorErrorHover: errorColors[5],
- colorError: errorColors[6],
- colorErrorActive: errorColors[7],
- colorErrorTextHover: errorColors[8],
- colorErrorText: errorColors[9],
- colorErrorTextActive: errorColors[10],
-
- colorWarningBg: warningColors[1],
- colorWarningBgHover: warningColors[2],
- colorWarningBorder: warningColors[3],
- colorWarningBorderHover: warningColors[4],
- colorWarningHover: warningColors[4],
- colorWarning: warningColors[6],
- colorWarningActive: warningColors[7],
- colorWarningTextHover: warningColors[8],
- colorWarningText: warningColors[9],
- colorWarningTextActive: warningColors[10],
-
- colorInfoBg: infoColors[1],
- colorInfoBgHover: infoColors[2],
- colorInfoBorder: infoColors[3],
- colorInfoBorderHover: infoColors[4],
- colorInfoHover: infoColors[4],
- colorInfo: infoColors[6],
- colorInfoActive: infoColors[7],
- colorInfoTextHover: infoColors[8],
- colorInfoText: infoColors[9],
- colorInfoTextActive: infoColors[10],
-
- colorLinkHover: linkColors[4],
- colorLink: linkColors[6],
- colorLinkActive: linkColors[7],
-
- colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
- colorWhite: '#fff',
- };
-}
diff --git a/components/_theme/themes/shared/genCommonMapToken.ts b/components/_theme/themes/shared/genCommonMapToken.ts
deleted file mode 100644
index 7561e9cd21..0000000000
--- a/components/_theme/themes/shared/genCommonMapToken.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { CommonMapToken, SeedToken } from '../../interface';
-import genRadius from './genRadius';
-
-export default function genCommonMapToken(token: SeedToken): CommonMapToken {
- const { motionUnit, motionBase, borderRadius, lineWidth } = token;
-
- return {
- // motion
- motionDurationFast: `${(motionBase + motionUnit).toFixed(1)}s`,
- motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
- motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
-
- // line
- lineWidthBold: lineWidth + 1,
-
- // radius
- ...genRadius(borderRadius),
- };
-}
diff --git a/components/_theme/themes/shared/genControlHeight.ts b/components/_theme/themes/shared/genControlHeight.ts
deleted file mode 100644
index 5303b6946f..0000000000
--- a/components/_theme/themes/shared/genControlHeight.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { HeightMapToken, SeedToken } from '../../interface';
-
-const genControlHeight = (token: SeedToken): HeightMapToken => {
- const { controlHeight } = token;
-
- return {
- controlHeightSM: controlHeight * 0.75,
- controlHeightXS: controlHeight * 0.5,
- controlHeightLG: controlHeight * 1.25,
- };
-};
-
-export default genControlHeight;
diff --git a/components/_theme/themes/shared/genFontMapToken.ts b/components/_theme/themes/shared/genFontMapToken.ts
deleted file mode 100644
index 8cd58e7e21..0000000000
--- a/components/_theme/themes/shared/genFontMapToken.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { FontMapToken } from '../../interface';
-import genFontSizes from './genFontSizes';
-
-const genFontMapToken = (fontSize: number): FontMapToken => {
- const fontSizePairs = genFontSizes(fontSize);
- const fontSizes = fontSizePairs.map(pair => pair.size);
- const lineHeights = fontSizePairs.map(pair => pair.lineHeight);
-
- const fontSizeMD = fontSizes[1];
- const fontSizeSM = fontSizes[0];
- const fontSizeLG = fontSizes[2];
- const lineHeight = lineHeights[1];
- const lineHeightSM = lineHeights[0];
- const lineHeightLG = lineHeights[2];
-
- return {
- fontSizeSM,
- fontSize: fontSizeMD,
- fontSizeLG,
- fontSizeXL: fontSizes[3],
-
- fontSizeHeading1: fontSizes[6],
- fontSizeHeading2: fontSizes[5],
- fontSizeHeading3: fontSizes[4],
- fontSizeHeading4: fontSizes[3],
- fontSizeHeading5: fontSizes[2],
-
- lineHeight,
- lineHeightLG,
- lineHeightSM,
-
- fontHeight: Math.round(lineHeight * fontSizeMD),
- fontHeightLG: Math.round(lineHeightLG * fontSizeLG),
- fontHeightSM: Math.round(lineHeightSM * fontSizeSM),
-
- lineHeightHeading1: lineHeights[6],
- lineHeightHeading2: lineHeights[5],
- lineHeightHeading3: lineHeights[4],
- lineHeightHeading4: lineHeights[3],
- lineHeightHeading5: lineHeights[2],
- };
-};
-
-export default genFontMapToken;
diff --git a/components/_theme/themes/shared/genFontSizes.ts b/components/_theme/themes/shared/genFontSizes.ts
deleted file mode 100644
index 47c027d498..0000000000
--- a/components/_theme/themes/shared/genFontSizes.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export function getLineHeight(fontSize: number) {
- return (fontSize + 8) / fontSize;
-}
-
-// https://zhuanlan.zhihu.com/p/32746810
-export default function getFontSizes(base: number) {
- const fontSizes = new Array(10).fill(null).map((_, index) => {
- const i = index - 1;
- const baseSize = base * 2.71828 ** (i / 5);
- const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize);
-
- // Convert to even
- return Math.floor(intSize / 2) * 2;
- });
-
- fontSizes[1] = base;
-
- return fontSizes.map(size => ({
- size,
- lineHeight: getLineHeight(size),
- }));
-}
diff --git a/components/_theme/themes/shared/genRadius.ts b/components/_theme/themes/shared/genRadius.ts
deleted file mode 100644
index 0bac4c9887..0000000000
--- a/components/_theme/themes/shared/genRadius.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { MapToken } from '../../interface';
-
-const genRadius = (
- radiusBase: number,
-): Pick<
- MapToken,
- 'borderRadiusXS' | 'borderRadiusSM' | 'borderRadiusLG' | 'borderRadius' | 'borderRadiusOuter'
-> => {
- let radiusLG = radiusBase;
- let radiusSM = radiusBase;
- let radiusXS = radiusBase;
- let radiusOuter = radiusBase;
-
- // radiusLG
- if (radiusBase < 6 && radiusBase >= 5) {
- radiusLG = radiusBase + 1;
- } else if (radiusBase < 16 && radiusBase >= 6) {
- radiusLG = radiusBase + 2;
- } else if (radiusBase >= 16) {
- radiusLG = 16;
- }
-
- // radiusSM
- if (radiusBase < 7 && radiusBase >= 5) {
- radiusSM = 4;
- } else if (radiusBase < 8 && radiusBase >= 7) {
- radiusSM = 5;
- } else if (radiusBase < 14 && radiusBase >= 8) {
- radiusSM = 6;
- } else if (radiusBase < 16 && radiusBase >= 14) {
- radiusSM = 7;
- } else if (radiusBase >= 16) {
- radiusSM = 8;
- }
-
- // radiusXS
- if (radiusBase < 6 && radiusBase >= 2) {
- radiusXS = 1;
- } else if (radiusBase >= 6) {
- radiusXS = 2;
- }
-
- // radiusOuter
- if (radiusBase > 4 && radiusBase < 8) {
- radiusOuter = 4;
- } else if (radiusBase >= 8) {
- radiusOuter = 6;
- }
-
- return {
- borderRadius: radiusBase,
- borderRadiusXS: radiusXS,
- borderRadiusSM: radiusSM,
- borderRadiusLG: radiusLG,
- borderRadiusOuter: radiusOuter,
- };
-};
-
-export default genRadius;
diff --git a/components/_theme/themes/shared/genSizeMapToken.ts b/components/_theme/themes/shared/genSizeMapToken.ts
deleted file mode 100644
index 3449c24dfe..0000000000
--- a/components/_theme/themes/shared/genSizeMapToken.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { SeedToken, SizeMapToken } from '../../interface';
-
-export default function genSizeMapToken(token: SeedToken): SizeMapToken {
- const { sizeUnit, sizeStep } = token;
-
- return {
- sizeXXL: sizeUnit * (sizeStep + 8), // 48
- sizeXL: sizeUnit * (sizeStep + 4), // 32
- sizeLG: sizeUnit * (sizeStep + 2), // 24
- sizeMD: sizeUnit * (sizeStep + 1), // 20
- sizeMS: sizeUnit * sizeStep, // 16
- size: sizeUnit * sizeStep, // 16
- sizeSM: sizeUnit * (sizeStep - 1), // 12
- sizeXS: sizeUnit * (sizeStep - 2), // 8
- sizeXXS: sizeUnit * (sizeStep - 3), // 4
- };
-}
diff --git a/components/_theme/util/alias.ts b/components/_theme/util/alias.ts
deleted file mode 100644
index 6b85352844..0000000000
--- a/components/_theme/util/alias.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../interface';
-import seedToken from '../themes/seed';
-import getAlphaColor from './getAlphaColor';
-
-/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
-type RawMergedToken = MapToken & OverrideToken & { override: Partial<AliasToken> };
-
-/**
- * Seed (designer) > Derivative (designer) > Alias (developer).
- *
- * Merge seed & derivative & override token and generate alias token for developer.
- */
-export default function formatToken(derivativeToken: RawMergedToken): AliasToken {
- const { override, ...restToken } = derivativeToken;
- const overrideTokens = { ...override };
-
- Object.keys(seedToken).forEach(token => {
- delete overrideTokens[token as keyof SeedToken];
- });
-
- const mergedToken = {
- ...restToken,
- ...overrideTokens,
- };
-
- const screenXS = 480;
- const screenSM = 576;
- const screenMD = 768;
- const screenLG = 992;
- const screenXL = 1200;
- const screenXXL = 1600;
- const screenXXXL = 2000;
-
- // Motion
- if (mergedToken.motion === false) {
- const fastDuration = '0s';
- mergedToken.motionDurationFast = fastDuration;
- mergedToken.motionDurationMid = fastDuration;
- mergedToken.motionDurationSlow = fastDuration;
- }
-
- // Generate alias token
- const aliasToken: AliasToken = {
- ...mergedToken,
-
- // ============== Background ============== //
- colorFillContent: mergedToken.colorFillSecondary,
- colorFillContentHover: mergedToken.colorFill,
- colorFillAlter: mergedToken.colorFillQuaternary,
- colorBgContainerDisabled: mergedToken.colorFillTertiary,
-
- // ============== Split ============== //
- colorBorderBg: mergedToken.colorBgContainer,
- colorSplit: getAlphaColor(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer),
-
- // ============== Text ============== //
- colorTextPlaceholder: mergedToken.colorTextQuaternary,
- colorTextDisabled: mergedToken.colorTextQuaternary,
- colorTextHeading: mergedToken.colorText,
- colorTextLabel: mergedToken.colorTextSecondary,
- colorTextDescription: mergedToken.colorTextTertiary,
- colorTextLightSolid: mergedToken.colorWhite,
- colorHighlight: mergedToken.colorError,
- colorBgTextHover: mergedToken.colorFillSecondary,
- colorBgTextActive: mergedToken.colorFill,
-
- colorIcon: mergedToken.colorTextTertiary,
- colorIconHover: mergedToken.colorText,
-
- colorErrorOutline: getAlphaColor(mergedToken.colorErrorBg, mergedToken.colorBgContainer),
- colorWarningOutline: getAlphaColor(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
-
- // Font
- fontSizeIcon: mergedToken.fontSizeSM,
-
- // Line
- lineWidthFocus: mergedToken.lineWidth * 4,
-
- // Control
- lineWidth: mergedToken.lineWidth,
- controlOutlineWidth: mergedToken.lineWidth * 2,
- // Checkbox size and expand icon size
- controlInteractiveSize: mergedToken.controlHeight / 2,
-
- controlItemBgHover: mergedToken.colorFillTertiary,
- controlItemBgActive: mergedToken.colorPrimaryBg,
- controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
- controlItemBgActiveDisabled: mergedToken.colorFill,
- controlTmpOutline: mergedToken.colorFillQuaternary,
- controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
-
- lineType: mergedToken.lineType,
- borderRadius: mergedToken.borderRadius,
- borderRadiusXS: mergedToken.borderRadiusXS,
- borderRadiusSM: mergedToken.borderRadiusSM,
- borderRadiusLG: mergedToken.borderRadiusLG,
-
- fontWeightStrong: 600,
-
- opacityLoading: 0.65,
-
- linkDecoration: 'none',
- linkHoverDecoration: 'none',
- linkFocusDecoration: 'none',
-
- controlPaddingHorizontal: 12,
- controlPaddingHorizontalSM: 8,
-
- paddingXXS: mergedToken.sizeXXS,
- paddingXS: mergedToken.sizeXS,
- paddingSM: mergedToken.sizeSM,
- padding: mergedToken.size,
- paddingMD: mergedToken.sizeMD,
- paddingLG: mergedToken.sizeLG,
- paddingXL: mergedToken.sizeXL,
-
- paddingContentHorizontalLG: mergedToken.sizeLG,
- paddingContentVerticalLG: mergedToken.sizeMS,
- paddingContentHorizontal: mergedToken.sizeMS,
- paddingContentVertical: mergedToken.sizeSM,
- paddingContentHorizontalSM: mergedToken.size,
- paddingContentVerticalSM: mergedToken.sizeXS,
-
- marginXXS: mergedToken.sizeXXS,
- marginXS: mergedToken.sizeXS,
- marginSM: mergedToken.sizeSM,
- margin: mergedToken.size,
- marginMD: mergedToken.sizeMD,
- marginLG: mergedToken.sizeLG,
- marginXL: mergedToken.sizeXL,
- marginXXL: mergedToken.sizeXXL,
-
- boxShadow: `
- 0 6px 16px 0 rgba(0, 0, 0, 0.08),
- 0 3px 6px -4px rgba(0, 0, 0, 0.12),
- 0 9px 28px 8px rgba(0, 0, 0, 0.05)
- `,
- boxShadowSecondary: `
- 0 6px 16px 0 rgba(0, 0, 0, 0.08),
- 0 3px 6px -4px rgba(0, 0, 0, 0.12),
- 0 9px 28px 8px rgba(0, 0, 0, 0.05)
- `,
- boxShadowTertiary: `
- 0 1px 2px 0 rgba(0, 0, 0, 0.03),
- 0 1px 6px -1px rgba(0, 0, 0, 0.02),
- 0 2px 4px 0 rgba(0, 0, 0, 0.02)
- `,
-
- screenXS,
- screenXSMin: screenXS,
- screenXSMax: screenSM - 1,
- screenSM,
- screenSMMin: screenSM,
- screenSMMax: screenMD - 1,
- screenMD,
- screenMDMin: screenMD,
- screenMDMax: screenLG - 1,
- screenLG,
- screenLGMin: screenLG,
- screenLGMax: screenXL - 1,
- screenXL,
- screenXLMin: screenXL,
- screenXLMax: screenXXL - 1,
- screenXXL,
- screenXXLMin: screenXXL,
- screenXXLMax: screenXXXL - 1,
- screenXXXL,
- screenXXXLMin: screenXXXL,
-
- boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
- boxShadowCard: `
- 0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
- 0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
- 0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
- `,
- boxShadowDrawerRight: `
- -6px 0 16px 0 rgba(0, 0, 0, 0.08),
- -3px 0 6px -4px rgba(0, 0, 0, 0.12),
- -9px 0 28px 8px rgba(0, 0, 0, 0.05)
- `,
- boxShadowDrawerLeft: `
- 6px 0 16px 0 rgba(0, 0, 0, 0.08),
- 3px 0 6px -4px rgba(0, 0, 0, 0.12),
- 9px 0 28px 8px rgba(0, 0, 0, 0.05)
- `,
- boxShadowDrawerUp: `
- 0 6px 16px 0 rgba(0, 0, 0, 0.08),
- 0 3px 6px -4px rgba(0, 0, 0, 0.12),
- 0 9px 28px 8px rgba(0, 0, 0, 0.05)
- `,
- boxShadowDrawerDown: `
- 0 -6px 16px 0 rgba(0, 0, 0, 0.08),
- 0 -3px 6px -4px rgba(0, 0, 0, 0.12),
- 0 -9px 28px 8px rgba(0, 0, 0, 0.05)
- `,
- boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)',
- boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)',
- boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)',
- boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)',
-
- // Override AliasToken
- ...overrideTokens,
- };
-
- return aliasToken;
-}
diff --git a/components/_theme/util/genComponentStyleHook.ts b/components/_theme/util/genComponentStyleHook.ts
deleted file mode 100644
index 540a6a4751..0000000000
--- a/components/_theme/util/genComponentStyleHook.ts
+++ /dev/null
@@ -1,458 +0,0 @@
-/* eslint-disable no-redeclare */
-import type { CSSInterpolation, CSSObject } from '../../_util/_cssinjs';
-import { token2CSSVar, useCSSVarRegister, useStyleRegister } from '../../_util/_cssinjs';
-import warning from '../../_util/warning';
-import { genCommonStyle, genLinkStyle } from '../../style';
-import type {
- AliasToken,
- ComponentTokenMap,
- GlobalToken,
- OverrideToken,
- UseComponentStyleResult,
-} from '../interface';
-import useToken, { ignore, unitless } from '../useToken';
-import genCalc from './calc';
-import type AbstractCalculator from './calc/calculator';
-import genMaxMin from './maxmin';
-import statisticToken, { merge as mergeToken } from './statistic';
-import useResetIconStyle from './useResetIconStyle';
-
-import type { Ref } from 'vue';
-import { defineComponent, computed, createVNode, Fragment } from 'vue';
-import { useConfigContextInject } from '../../config-provider/context';
-import type { VueNode } from 'ant-design-vue/es/_util/type';
-import { objectType } from 'ant-design-vue/es/_util/type';
-
-export type OverrideTokenWithoutDerivative = ComponentTokenMap;
-export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
-export type GlobalTokenWithComponent<C extends OverrideComponent> = GlobalToken &
- ComponentTokenMap[C];
-
-type ComponentToken<C extends OverrideComponent> = Exclude<OverrideToken[C], undefined>;
-type ComponentTokenKey<C extends OverrideComponent> = keyof ComponentToken<C>;
-
-export interface StyleInfo {
- hashId: string;
- prefixCls: string;
- rootPrefixCls: string;
- iconPrefixCls: string;
-}
-
-export type CSSUtil = {
- calc: (number: any) => AbstractCalculator;
- max: (...values: (number | string)[]) => number | string;
- min: (...values: (number | string)[]) => number | string;
-};
-
-export type TokenWithCommonCls<T> = T & {
- /** Wrap component class with `.` prefix */
- componentCls: string;
- /** Origin prefix which do not have `.` prefix */
- prefixCls: string;
- /** Wrap icon class with `.` prefix */
- iconCls: string;
- /** Wrap ant prefixCls class with `.` prefix */
- antCls: string;
-} & CSSUtil;
-
-export type FullToken<C extends OverrideComponent> = TokenWithCommonCls<
- GlobalTokenWithComponent<C>
->;
-
-export type GenStyleFn<C extends OverrideComponent> = (
- token: FullToken<C>,
- info: StyleInfo,
-) => CSSInterpolation;
-
-export type GetDefaultToken<C extends OverrideComponent> =
- | null
- | OverrideTokenWithoutDerivative[C]
- | ((
- token: AliasToken & Partial<OverrideTokenWithoutDerivative[C]>,
- ) => OverrideTokenWithoutDerivative[C]);
-
-const getDefaultComponentToken = <C extends OverrideComponent>(
- component: C,
- token: Ref<GlobalToken>,
- getDefaultToken: GetDefaultToken<C>,
-) => {
- if (typeof getDefaultToken === 'function') {
- return getDefaultToken(mergeToken<any>(token.value, token.value[component] ?? {}));
- }
- return getDefaultToken ?? {};
-};
-
-const getComponentToken = <C extends OverrideComponent>(
- component: C,
- token: Ref<GlobalToken>,
- defaultToken: OverrideTokenWithoutDerivative[C],
- options?: {
- deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
- },
-) => {
- const customToken = { ...(token.value[component] as ComponentToken<C>) };
- if (options?.deprecatedTokens) {
- const { deprecatedTokens } = options;
- deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
- if (process.env.NODE_ENV !== 'production') {
- warning(
- !customToken?.[oldTokenKey],
- `Component Token \`${String(
- oldTokenKey,
- )}\` of ${component} is deprecated. Please use \`${String(newTokenKey)}\` instead.`,
- );
- }
-
- // Should wrap with `if` clause, or there will be `undefined` in object.
- if (customToken?.[oldTokenKey] || customToken?.[newTokenKey]) {
- customToken[newTokenKey] ??= customToken?.[oldTokenKey];
- }
- });
- }
- const mergedToken: any = { ...defaultToken, ...customToken };
-
- // Remove same value as global token to minimize size
- Object.keys(mergedToken).forEach(key => {
- if (mergedToken[key] === token[key as keyof GlobalToken]) {
- delete mergedToken[key];
- }
- });
-
- return mergedToken;
-};
-
-const getCompVarPrefix = (component: string, prefix?: string) =>
- `${[
- prefix,
- component.replace(/([A-Z]+)([A-Z][a-z]+)/g, '$1-$2').replace(/([a-z])([A-Z])/g, '$1-$2'),
- ]
- .filter(Boolean)
- .join('-')}`;
-
-export default function genComponentStyleHook<C extends OverrideComponent>(
- componentName: C | [C, string],
- styleFn: GenStyleFn<C>,
- getDefaultToken?: GetDefaultToken<C>,
- options: {
- resetStyle?: boolean;
- // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
- deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
- /**
- * Only use component style in client side. Ignore in SSR.
- */
- clientOnly?: boolean;
- /**
- * Set order of component style. Default is -999.
- */
- order?: number;
- injectStyle?: boolean;
- } = {},
-) {
- const cells = (Array.isArray(componentName) ? componentName : [componentName, componentName]) as [
- C,
- string,
- ];
-
- const [component] = cells;
- const concatComponent = cells.join('-');
-
- return (_prefixCls?: Ref<string>): UseComponentStyleResult => {
- const prefixCls = computed(() => _prefixCls?.value);
- const [theme, realToken, hashId, token, cssVar] = useToken();
- const { getPrefixCls, iconPrefixCls, csp } = useConfigContextInject();
-
- const rootPrefixCls = computed(() => getPrefixCls());
-
- const type = computed(() => (cssVar.value ? 'css' : 'js'));
- const calc = computed(() => genCalc(type.value));
- const maxMin = computed(() => genMaxMin(type.value));
-
- // Shared config
- // const sharedConfig: Omit<Parameters<typeof useStyleRegister>[0], 'path'> = {
- // theme: theme.value,
- // token: token.value,
- // hashId: hashId.value,
- // nonce: () => csp.value?.nonce!,
- // clientOnly: options.clientOnly,
-
- // // antd is always at top of styles
- // order: options.order || -999,
- // };
-
- const sharedConfig = computed(() => {
- return {
- theme: theme.value,
- token: token.value,
- hashId: hashId.value,
- nonce: () => csp.value && csp.value.nonce,
- clientOnly: options.clientOnly,
-
- // antd is always at top of styles
- order: options.order || -999,
- };
- });
-
- // Generate style for all a tags in antd component.
- useStyleRegister(
- computed(() => ({
- ...sharedConfig.value,
- clientOnly: false,
- path: ['Shared', rootPrefixCls.value],
- })),
- () =>
- [
- {
- // Link
- '&': genLinkStyle(token.value),
- },
- ] as CSSObject[],
- );
-
- // Generate style for icons
- useResetIconStyle(iconPrefixCls, csp);
-
- const wrapSSR = useStyleRegister(
- computed(() => ({
- ...sharedConfig.value,
- path: [concatComponent, prefixCls.value, iconPrefixCls.value],
- })),
- () => {
- if (options.injectStyle === false) {
- return [];
- }
-
- const { token: proxyToken, flush } = statisticToken(token.value);
-
- const defaultComponentToken = getDefaultComponentToken(
- component,
- realToken,
- getDefaultToken,
- );
-
- const componentCls = `.${prefixCls.value}`;
- const componentToken = getComponentToken(component, realToken, defaultComponentToken, {
- deprecatedTokens: options.deprecatedTokens,
- });
-
- if (cssVar.value) {
- Object.keys(defaultComponentToken).forEach(key => {
- defaultComponentToken[key] = `var(${token2CSSVar(
- key,
- getCompVarPrefix(component, cssVar.value?.prefix),
- )})`;
- });
- }
- const mergedToken = mergeToken<
- TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
- >(
- proxyToken,
- {
- componentCls,
- prefixCls: prefixCls.value,
- iconCls: `.${iconPrefixCls.value}`,
- antCls: `.${rootPrefixCls.value}`,
- calc: calc.value,
- max: maxMin.value.max,
- min: maxMin.value.min,
- },
- cssVar.value ? defaultComponentToken : componentToken,
- );
-
- const styleInterpolation = styleFn(mergedToken as unknown as FullToken<C>, {
- hashId: hashId.value,
- prefixCls: prefixCls.value,
- rootPrefixCls: rootPrefixCls.value,
- iconPrefixCls: iconPrefixCls.value,
- });
- flush(component, componentToken);
- return [
- options.resetStyle === false ? null : genCommonStyle(mergedToken, prefixCls.value),
- styleInterpolation,
- ] as CSSObject[];
- },
- );
-
- return [wrapSSR, hashId];
- };
-}
-
-export interface SubStyleComponentProps {
- prefixCls: Ref<string>;
-}
-
-// Get from second argument
-type RestParameters<T extends any[]> = T extends [any, ...infer Rest] ? Rest : never;
-
-export const genSubStyleComponent: <C extends OverrideComponent>(
- componentName: [C, string],
- ...args: RestParameters<Parameters<typeof genComponentStyleHook<C>>>
-) => any = (componentName, styleFn, getDefaultToken, options) => {
- const useStyle = genComponentStyleHook(componentName, styleFn, getDefaultToken, {
- resetStyle: false,
-
- // Sub Style should default after root one
- order: -998,
- ...options,
- });
-
- const StyledComponent = defineComponent({
- props: {
- prefixCls: String,
- },
- setup(props) {
- const prefixCls = computed(() => props.prefixCls);
- useStyle(prefixCls);
- return () => {
- return null;
- };
- },
- });
-
- return StyledComponent;
-};
-
-export type CSSVarRegisterProps = {
- rootCls: string;
- component: string;
- cssVar: {
- prefix?: string;
- key?: string;
- };
-};
-
-const genCSSVarRegister = <C extends OverrideComponent>(
- component: C,
- getDefaultToken?: GetDefaultToken<C>,
- options?: {
- unitless?: {
- [key in ComponentTokenKey<C>]: boolean;
- };
- deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
-
- injectStyle?: boolean;
- },
-) => {
- function prefixToken(key: string) {
- return `${component}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`;
- }
-
- const { unitless: originUnitless = {}, injectStyle = true } = options ?? {};
- const compUnitless: any = {
- [prefixToken('zIndexPopup')]: true,
- };
- Object.keys(originUnitless).forEach((key: keyof ComponentTokenKey<C>) => {
- compUnitless[prefixToken(key)] = originUnitless[key];
- });
-
- const CSSVarRegister = defineComponent({
- props: {
- rootCls: String,
- component: String,
- cssVar: objectType<{
- prefix: string;
- key: string;
- }>(),
- },
- setup(props) {
- const [, realToken] = useToken();
-
- useCSSVarRegister(
- computed(() => {
- return {
- path: [props.component],
- prefix: props.cssVar.prefix,
- key: props.cssVar.key!,
- unitless: {
- ...unitless,
- ...compUnitless,
- },
- ignore,
- token: realToken.value,
- scope: props.rootCls,
- };
- }),
- () => {
- const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken);
- const componentToken = getComponentToken(component, realToken, defaultToken, {
- deprecatedTokens: options?.deprecatedTokens,
- });
- Object.keys(defaultToken).forEach(key => {
- componentToken[prefixToken(key)] = componentToken[key];
- delete componentToken[key];
- });
- return componentToken;
- },
- );
-
- return () => {
- return null;
- };
- },
- });
-
- const useCSSVar = (rootCls: Ref<string>) => {
- const [, , , , cssVar] = useToken();
-
- return [
- (node: VueNode): VueNode =>
- injectStyle && cssVar.value
- ? createVNode(Fragment, null, [
- createVNode(CSSVarRegister, {
- rootCls: rootCls.value,
- cssVar: cssVar.value,
- component,
- }),
- node,
- ])
- : node,
- computed(() => cssVar.value?.key),
- ] as const;
- };
-
- return useCSSVar;
-};
-
-export const genStyleHooks = <C extends OverrideComponent>(
- component: C | [C, string],
- styleFn: GenStyleFn<C>,
- getDefaultToken?: GetDefaultToken<C>,
- options?: {
- resetStyle?: boolean;
- deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
- /**
- * Component tokens that do not need unit.
- */
- unitless?: {
- [key in ComponentTokenKey<C>]: boolean;
- };
- /**
- * Only use component style in client side. Ignore in SSR.
- */
- clientOnly?: boolean;
- /**
- * Set order of component style.
- * @default -999
- */
- order?: number;
- /**
- * Whether generate styles
- * @default true
- */
- injectStyle?: boolean;
- },
-) => {
- const useStyle = genComponentStyleHook(component, styleFn, getDefaultToken, options);
-
- const useCSSVar = genCSSVarRegister(
- Array.isArray(component) ? component[0] : component,
- getDefaultToken,
- options,
- );
-
- return (prefixCls: Ref<string>, rootCls: Ref<string> = prefixCls) => {
- const [, hashId] = useStyle(prefixCls);
- const [wrapCSSVar, cssVarCls] = useCSSVar(rootCls);
-
- return [wrapCSSVar, hashId, cssVarCls] as const;
- };
-};
diff --git a/components/_theme/util/getAlphaColor.ts b/components/_theme/util/getAlphaColor.ts
deleted file mode 100644
index 7cd1d3fdbb..0000000000
--- a/components/_theme/util/getAlphaColor.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-
-function isStableColor(color: number): boolean {
- return color >= 0 && color <= 255;
-}
-
-function getAlphaColor(frontColor: string, backgroundColor: string): string {
- const { r: fR, g: fG, b: fB, a: originAlpha } = new TinyColor(frontColor).toRgb();
- if (originAlpha < 1) {
- return frontColor;
- }
-
- const { r: bR, g: bG, b: bB } = new TinyColor(backgroundColor).toRgb();
-
- for (let fA = 0.01; fA <= 1; fA += 0.01) {
- const r = Math.round((fR - bR * (1 - fA)) / fA);
- const g = Math.round((fG - bG * (1 - fA)) / fA);
- const b = Math.round((fB - bB * (1 - fA)) / fA);
- if (isStableColor(r) && isStableColor(g) && isStableColor(b)) {
- return new TinyColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString();
- }
- }
-
- // fallback
- /* istanbul ignore next */
- return new TinyColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString();
-}
-
-export default getAlphaColor;
diff --git a/components/_theme/util/statistic.ts b/components/_theme/util/statistic.ts
deleted file mode 100644
index 2b29ebacd1..0000000000
--- a/components/_theme/util/statistic.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { AnyObject } from '../../_util/type';
-
-declare const CSSINJS_STATISTIC: any;
-
-const enableStatistic =
- process.env.NODE_ENV !== 'production' || typeof CSSINJS_STATISTIC !== 'undefined';
-let recording = true;
-
-/**
- * This function will do as `Object.assign` in production. But will use Object.defineProperty:get to
- * pass all value access in development. To support statistic field usage with alias token.
- */
-export function merge<T extends AnyObject>(...objs: Partial<T>[]): T {
- /* istanbul ignore next */
- if (!enableStatistic) {
- return Object.assign({}, ...objs);
- }
-
- recording = false;
-
- const ret = {} as T;
-
- objs.forEach(obj => {
- const keys = Object.keys(obj);
-
- keys.forEach(key => {
- Object.defineProperty(ret, key, {
- configurable: true,
- enumerable: true,
- get: () => (obj as any)[key],
- });
- });
- });
-
- recording = true;
- return ret;
-}
-
-/** @internal Internal Usage. Not use in your production. */
-export const statistic: Record<
- string,
- { global: string[]; component: Record<string, string | number> }
-> = {};
-
-/** @internal Internal Usage. Not use in your production. */
-// eslint-disable-next-line camelcase
-export const _statistic_build_: typeof statistic = {};
-
-/* istanbul ignore next */
-function noop() {}
-
-/** Statistic token usage case. Should use `merge` function if you do not want spread record. */
-const statisticToken = <T extends AnyObject>(token: T) => {
- let tokenKeys: Set<string> | undefined;
- let proxy = token;
- let flush: (componentName: string, componentToken: Record<string, string | number>) => void =
- noop;
-
- if (enableStatistic && typeof Proxy !== 'undefined') {
- tokenKeys = new Set<string>();
-
- proxy = new Proxy(token, {
- get(obj: any, prop: any) {
- if (recording) {
- tokenKeys!.add(prop);
- }
- return obj[prop];
- },
- });
-
- flush = (componentName, componentToken) => {
- statistic[componentName] = {
- global: Array.from(tokenKeys!),
- component: {
- ...statistic[componentName]?.component,
- ...componentToken,
- },
- };
- };
- }
-
- return { token: proxy, keys: tokenKeys, flush };
-};
-
-export default statisticToken;
diff --git a/components/_util/_cssinjs/Cache.ts b/components/_util/_cssinjs/Cache.ts
deleted file mode 100644
index cff14b4752..0000000000
--- a/components/_util/_cssinjs/Cache.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export type KeyType = string | number;
-type ValueType = [number, any]; // [times, realValue]
-
-const SPLIT = '%';
-
-class Entity {
- instanceId: string;
- constructor(instanceId: string) {
- this.instanceId = instanceId;
- }
-
- /** @private Internal cache map. Do not access this directly */
- cache = new Map<string, ValueType>();
-
- get(keys: KeyType[] | string): ValueType | null {
- return this.cache.get(Array.isArray(keys) ? keys.join(SPLIT) : keys) || null;
- }
-
- update(keys: KeyType[] | string, valueFn: (origin: ValueType | null) => ValueType | null) {
- const path = Array.isArray(keys) ? keys.join(SPLIT) : keys;
- const prevValue = this.cache.get(path)!;
- const nextValue = valueFn(prevValue);
-
- if (nextValue === null) {
- this.cache.delete(path);
- } else {
- this.cache.set(path, nextValue);
- }
- }
-}
-
-export default Entity;
diff --git a/components/_util/_cssinjs/Keyframes.ts b/components/_util/_cssinjs/Keyframes.ts
deleted file mode 100644
index 64b99e27c3..0000000000
--- a/components/_util/_cssinjs/Keyframes.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { CSSInterpolation } from './hooks/useStyleRegister';
-
-class Keyframe {
- private name: string;
- style: CSSInterpolation;
-
- constructor(name: string, style: CSSInterpolation) {
- this.name = name;
- this.style = style;
- }
-
- getName(hashId = ''): string {
- return hashId ? `${hashId}-${this.name}` : this.name;
- }
-
- _keyframe = true;
-}
-
-export default Keyframe;
diff --git a/components/_util/_cssinjs/StyleContext.tsx b/components/_util/_cssinjs/StyleContext.tsx
deleted file mode 100644
index 6d062eece2..0000000000
--- a/components/_util/_cssinjs/StyleContext.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import type { ShallowRef, ExtractPropTypes, InjectionKey, Ref } from 'vue';
-import {
- provide,
- defineComponent,
- unref,
- inject,
- watch,
- shallowRef,
- getCurrentInstance,
-} from 'vue';
-import CacheEntity from './Cache';
-import type { Linter } from './linters/interface';
-import type { Transformer } from './transformers/interface';
-import { arrayType, booleanType, objectType, someType, stringType, withInstall } from '../type';
-export const ATTR_TOKEN = 'data-token-hash';
-export const ATTR_MARK = 'data-css-hash';
-export const ATTR_CACHE_PATH = 'data-cache-path';
-
-// Mark css-in-js instance in style element
-export const CSS_IN_JS_INSTANCE = '__cssinjs_instance__';
-
-export function createCache() {
- const cssinjsInstanceId = Math.random().toString(12).slice(2);
-
- // Tricky SSR: Move all inline style to the head.
- // PS: We do not recommend tricky mode.
- if (typeof document !== 'undefined' && document.head && document.body) {
- const styles = document.body.querySelectorAll(`style[${ATTR_MARK}]`) || [];
- const { firstChild } = document.head;
-
- Array.from(styles).forEach(style => {
- (style as any)[CSS_IN_JS_INSTANCE] = (style as any)[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
-
- // Not force move if no head
- if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
- document.head.insertBefore(style, firstChild);
- }
- });
-
- // Deduplicate of moved styles
- const styleHash: Record<string, boolean> = {};
- Array.from(document.querySelectorAll(`style[${ATTR_MARK}]`)).forEach(style => {
- const hash = style.getAttribute(ATTR_MARK)!;
- if (styleHash[hash]) {
- if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
- style.parentNode?.removeChild(style);
- }
- } else {
- styleHash[hash] = true;
- }
- });
- }
-
- return new CacheEntity(cssinjsInstanceId);
-}
-
-export type HashPriority = 'low' | 'high';
-
-export interface StyleContextProps {
- autoClear?: boolean;
- /** @private Test only. Not work in production. */
- mock?: 'server' | 'client';
- /**
- * Only set when you need ssr to extract style on you own.
- * If not provided, it will auto create <style /> on the end of Provider in server side.
- */
- cache: CacheEntity;
- /** Tell children that this context is default generated context */
- defaultCache: boolean;
- /** Use `:where` selector to reduce hashId css selector priority */
- hashPriority?: HashPriority;
- /** Tell cssinjs where to inject style in */
- container?: Element | ShadowRoot;
- /** Component wil render inline `<style />` for fallback in SSR. Not recommend. */
- ssrInline?: boolean;
- /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
- transformers?: Transformer[];
- /**
- * Linters to lint css before inject in document.
- * Styles will be linted after transforming.
- * Please note that `linters` do not support dynamic update.
- */
- linters?: Linter[];
-}
-
-const StyleContextKey: InjectionKey<ShallowRef<Partial<StyleContextProps>>> =
- Symbol('StyleContextKey');
-
-export type UseStyleProviderProps = Partial<StyleContextProps> | Ref<Partial<StyleContextProps>>;
-
-// fix: https://github.com/vueComponent/ant-design-vue/issues/7023
-const getCache = () => {
- const instance = getCurrentInstance();
- let cache: CacheEntity;
- if (instance && instance.appContext) {
- const globalCache = instance.appContext?.config?.globalProperties?.__ANTDV_CSSINJS_CACHE__;
- if (globalCache) {
- cache = globalCache;
- } else {
- cache = createCache();
- if (instance.appContext.config.globalProperties) {
- instance.appContext.config.globalProperties.__ANTDV_CSSINJS_CACHE__ = cache;
- }
- }
- } else {
- cache = createCache();
- }
- return cache;
-};
-
-const defaultStyleContext: StyleContextProps = {
- cache: createCache(),
- defaultCache: true,
- hashPriority: 'low',
-};
-// fix: https://github.com/vueComponent/ant-design-vue/issues/6912
-export const useStyleInject = () => {
- const cache = getCache();
- return inject(StyleContextKey, shallowRef({ ...defaultStyleContext, cache }));
-};
-export const useStyleProvider = (props: UseStyleProviderProps) => {
- const parentContext = useStyleInject();
- const context = shallowRef<Partial<StyleContextProps>>({
- ...defaultStyleContext,
- cache: createCache(),
- });
- watch(
- [() => unref(props), parentContext],
- () => {
- const mergedContext: Partial<StyleContextProps> = {
- ...parentContext.value,
- };
- const propsValue = unref(props);
- Object.keys(propsValue).forEach(key => {
- const value = propsValue[key];
- if (propsValue[key] !== undefined) {
- mergedContext[key] = value;
- }
- });
-
- const { cache } = propsValue;
- mergedContext.cache = mergedContext.cache || createCache();
- mergedContext.defaultCache = !cache && parentContext.value.defaultCache;
- context.value = mergedContext;
- },
- { immediate: true },
- );
- provide(StyleContextKey, context);
- return context;
-};
-export const styleProviderProps = () => ({
- autoClear: booleanType(),
- /** @private Test only. Not work in production. */
- mock: stringType<'server' | 'client'>(),
- /**
- * Only set when you need ssr to extract style on you own.
- * If not provided, it will auto create <style /> on the end of Provider in server side.
- */
- cache: objectType<CacheEntity>(),
- /** Tell children that this context is default generated context */
- defaultCache: booleanType(),
- /** Use `:where` selector to reduce hashId css selector priority */
- hashPriority: stringType<HashPriority>(),
- /** Tell cssinjs where to inject style in */
- container: someType<Element | ShadowRoot>(),
- /** Component wil render inline `<style />` for fallback in SSR. Not recommend. */
- ssrInline: booleanType(),
- /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
- transformers: arrayType<Transformer[]>(),
- /**
- * Linters to lint css before inject in document.
- * Styles will be linted after transforming.
- * Please note that `linters` do not support dynamic update.
- */
- linters: arrayType<Linter[]>(),
-});
-export type StyleProviderProps = Partial<ExtractPropTypes<ReturnType<typeof styleProviderProps>>>;
-export const StyleProvider = withInstall(
- defineComponent({
- name: 'AStyleProvider',
- inheritAttrs: false,
- props: styleProviderProps(),
- setup(props, { slots }) {
- useStyleProvider(props);
- return () => slots.default?.();
- },
- }),
-);
-
-export default {
- useStyleInject,
- useStyleProvider,
- StyleProvider,
-};
diff --git a/components/_util/_cssinjs/hooks/useCacheToken.tsx b/components/_util/_cssinjs/hooks/useCacheToken.tsx
deleted file mode 100644
index 6067cdd62a..0000000000
--- a/components/_util/_cssinjs/hooks/useCacheToken.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import hash from '@emotion/hash';
-import { updateCSS } from '../../../vc-util/Dom/dynamicCSS';
-import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
-import type Theme from '../theme/Theme';
-import { flattenToken, memoResult, token2key, toStyleStr } from '../util';
-import { transformToken } from '../util/css-variables';
-import type { ExtractStyle } from './useGlobalCache';
-import useGlobalCache from './useGlobalCache';
-import type { Ref } from 'vue';
-import { ref, computed } from 'vue';
-
-const EMPTY_OVERRIDE = {};
-
-// Generate different prefix to make user selector break in production env.
-// This helps developer not to do style override directly on the hash id.
-const hashPrefix = process.env.NODE_ENV !== 'production' ? 'css-dev-only-do-not-override' : 'css';
-
-export interface Option<DerivativeToken, DesignToken> {
- /**
- * Generate token with salt.
- * This is used to generate different hashId even same derivative token for different version.
- */
- salt?: string;
- override?: object;
- /**
- * Format token as you need. Such as:
- *
- * - rename token
- * - merge token
- * - delete token
- *
- * This should always be the same since it's one time process.
- * It's ok to useMemo outside but this has better cache strategy.
- */
- formatToken?: (mergedToken: any) => DerivativeToken;
- /**
- * Get final token with origin token, override token and theme.
- * The parameters do not contain formatToken since it's passed by user.
- * @param origin The original token.
- * @param override Extra tokens to override.
- * @param theme Theme instance. Could get derivative token by `theme.getDerivativeToken`
- */
- getComputedToken?: (
- origin: DesignToken,
- override: object,
- theme: Theme<any, any>,
- ) => DerivativeToken;
-
- /**
- * Transform token to css variables.
- */
- cssVar?: {
- /** Prefix for css variables */
- prefix?: string;
- /** Tokens that should not be appended with unit */
- unitless?: Record<string, boolean>;
- /** Tokens that should not be transformed to css variables */
- ignore?: Record<string, boolean>;
- /** Tokens that preserves origin value */
- preserve?: Record<string, boolean>;
- /** Key for current theme. Useful for customizing and should be unique */
- key?: string;
- };
-}
-
-const tokenKeys = new Map<string, number>();
-function recordCleanToken(tokenKey: string) {
- tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1);
-}
-
-function removeStyleTags(key: string, instanceId: string) {
- if (typeof document !== 'undefined') {
- const styles = document.querySelectorAll(`style[${ATTR_TOKEN}="${key}"]`);
-
- styles.forEach(style => {
- if ((style as any)[CSS_IN_JS_INSTANCE] === instanceId) {
- style.parentNode?.removeChild(style);
- }
- });
- }
-}
-
-const TOKEN_THRESHOLD = 0;
-
-// Remove will check current keys first
-function cleanTokenStyle(tokenKey: string, instanceId: string) {
- tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1);
-
- const tokenKeyList = Array.from(tokenKeys.keys());
- const cleanableKeyList = tokenKeyList.filter(key => {
- const count = tokenKeys.get(key) || 0;
-
- return count <= 0;
- });
-
- // Should keep tokens under threshold for not to insert style too often
- if (tokenKeyList.length - cleanableKeyList.length > TOKEN_THRESHOLD) {
- cleanableKeyList.forEach(key => {
- removeStyleTags(key, instanceId);
- tokenKeys.delete(key);
- });
- }
-}
-
-export const getComputedToken = <DerivativeToken = object, DesignToken = DerivativeToken>(
- originToken: DesignToken,
- overrideToken: object,
- theme: Theme<any, any>,
- format?: (token: DesignToken) => DerivativeToken,
-) => {
- const derivativeToken = theme.getDerivativeToken(originToken);
-
- // Merge with override
- let mergedDerivativeToken = {
- ...derivativeToken,
- ...overrideToken,
- };
-
- // Format if needed
- if (format) {
- mergedDerivativeToken = format(mergedDerivativeToken);
- }
-
- return mergedDerivativeToken;
-};
-
-export const TOKEN_PREFIX = 'token';
-
-type TokenCacheValue<DerivativeToken> = [
- token: DerivativeToken & { _tokenKey: string; _themeKey: string },
- hashId: string,
- realToken: DerivativeToken & { _tokenKey: string },
- cssVarStr: string,
- cssVarKey: string,
-];
-
-/**
- * Cache theme derivative token as global shared one
- * @param theme Theme entity
- * @param tokens List of tokens, used for cache. Please do not dynamic generate object directly
- * @param option Additional config
- * @returns Call Theme.getDerivativeToken(tokenObject) to get token
- */
-export default function useCacheToken<DerivativeToken = object, DesignToken = DerivativeToken>(
- theme: Ref<Theme<any, any>>,
- tokens: Ref<Partial<DesignToken>[]>,
- option: Ref<Option<DerivativeToken, DesignToken>> = ref({}),
-): Ref<TokenCacheValue<DerivativeToken>> {
- const styleContext = useStyleInject();
-
- // Basic - We do basic cache here
- const mergedToken = computed(() =>
- memoResult(() => Object.assign({}, ...tokens.value), tokens.value),
- );
-
- const tokenStr = computed(() => flattenToken(mergedToken.value));
- const overrideTokenStr = computed(() => flattenToken(option.value.override ?? EMPTY_OVERRIDE));
-
- const cssVarStr = computed(() => (option.value.cssVar ? flattenToken(option.value.cssVar) : ''));
-
- const cachedToken = useGlobalCache<TokenCacheValue<DerivativeToken>>(
- TOKEN_PREFIX,
- computed(() => [
- option.value.salt ?? '',
- theme.value?.id,
- tokenStr.value,
- overrideTokenStr.value,
- cssVarStr.value,
- ]),
- () => {
- const {
- salt = '',
- override = EMPTY_OVERRIDE,
- formatToken,
- getComputedToken: compute,
- cssVar,
- } = option.value;
- let mergedDerivativeToken = compute
- ? compute(mergedToken.value, override, theme.value)
- : getComputedToken(mergedToken.value, override, theme.value, formatToken);
-
- // Replace token value with css variables
- const actualToken = { ...mergedDerivativeToken };
- let cssVarsStr = '';
- if (!!cssVar) {
- [mergedDerivativeToken, cssVarsStr] = transformToken(mergedDerivativeToken, cssVar.key!, {
- prefix: cssVar.prefix,
- ignore: cssVar.ignore,
- unitless: cssVar.unitless,
- preserve: cssVar.preserve,
- });
- }
-
- // Optimize for `useStyleRegister` performance
- const tokenKey = token2key(mergedDerivativeToken, salt);
- mergedDerivativeToken._tokenKey = tokenKey;
- actualToken._tokenKey = token2key(actualToken, salt);
-
- const themeKey = cssVar?.key ?? tokenKey;
- mergedDerivativeToken._themeKey = themeKey;
- recordCleanToken(themeKey);
-
- const hashId = `${hashPrefix}-${hash(tokenKey)}`;
- mergedDerivativeToken._hashId = hashId; // Not used
-
- return [mergedDerivativeToken, hashId, actualToken, cssVarsStr, cssVar?.key || ''];
- },
- cache => {
- // Remove token will remove all related style
- cleanTokenStyle(cache[0]._themeKey, styleContext.value?.cache?.instanceId);
- },
- ([token, , , cssVarsStr]) => {
- const { cssVar } = option.value;
- if (cssVar && cssVarsStr) {
- const style = updateCSS(cssVarsStr, hash(`css-variables-${token._themeKey}`), {
- mark: ATTR_MARK,
- prepend: 'queue',
- attachTo: styleContext.value?.container,
- priority: -999,
- });
-
- (style as any)[CSS_IN_JS_INSTANCE] = styleContext.value?.cache?.instanceId;
-
- // Used for `useCacheToken` to remove on batch when token removed
- style.setAttribute(ATTR_TOKEN, token._themeKey);
- }
- },
- );
-
- return cachedToken;
-}
-
-export const extract: ExtractStyle<TokenCacheValue<any>> = (cache, _effectStyles, options) => {
- const [, , realToken, styleStr, cssVarKey] = cache;
- const { plain } = options || {};
-
- if (!styleStr) {
- return null;
- }
-
- const styleId = realToken._tokenKey;
- const order = -999;
-
- // ====================== Style ======================
- // Used for rc-util
- const sharedAttrs = {
- 'data-vc-order': 'prependQueue',
- 'data-vc-priority': `${order}`,
- };
-
- const styleText = toStyleStr(styleStr, cssVarKey, styleId, sharedAttrs, plain);
-
- return [order, styleId, styleText];
-};
diff --git a/components/_util/_cssinjs/hooks/useGlobalCache.tsx b/components/_util/_cssinjs/hooks/useGlobalCache.tsx
deleted file mode 100644
index de2e707558..0000000000
--- a/components/_util/_cssinjs/hooks/useGlobalCache.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useStyleInject } from '../StyleContext';
-import type { KeyType } from '../Cache';
-import useCompatibleInsertionEffect from './useCompatibleInsertionEffect';
-import useHMR from './useHMR';
-import type { ShallowRef, Ref } from 'vue';
-import { onBeforeUnmount, watch, computed } from 'vue';
-
-export type ExtractStyle<CacheValue> = (
- cache: CacheValue,
- effectStyles: Record<string, boolean>,
- options?: {
- plain?: boolean;
- },
-) => [order: number, styleId: string, style: string] | null;
-
-export default function useGlobalCache<CacheType>(
- prefix: string,
- keyPath: Ref<KeyType[]>,
- cacheFn: () => CacheType,
- onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void,
- // Add additional effect trigger by `useInsertionEffect`
- onCacheEffect?: (cachedValue: CacheType) => void,
-): ShallowRef<CacheType> {
- const styleContext = useStyleInject();
- const globalCache = computed(() => styleContext.value?.cache);
- const deps = computed(() => [prefix, ...keyPath.value].join('%'));
-
- const HMRUpdate = useHMR();
-
- type UpdaterArgs = [times: number, cache: CacheType];
-
- const buildCache = (updater?: (data: UpdaterArgs) => UpdaterArgs) => {
- globalCache.value.update(deps.value, prevCache => {
- const [times = 0, cache] = prevCache || [undefined, undefined];
-
- // HMR should always ignore cache since developer may change it
- let tmpCache = cache;
- if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) {
- onCacheRemove?.(tmpCache, HMRUpdate);
- tmpCache = null;
- }
-
- const mergedCache = tmpCache || cacheFn();
-
- const data: UpdaterArgs = [times, mergedCache];
-
- // Call updater if need additional logic
- return updater ? updater(data) : data;
- });
- };
-
- watch(
- deps,
- () => {
- buildCache();
- },
- { immediate: true },
- );
-
- let cacheEntity = globalCache.value.get(deps.value);
-
- // HMR clean the cache but not trigger `useMemo` again
- // Let's fallback of this
- // ref https://github.com/ant-design/cssinjs/issues/127
- if (process.env.NODE_ENV !== 'production' && !cacheEntity) {
- buildCache();
- cacheEntity = globalCache.value.get(deps.value);
- }
-
- const cacheContent = computed(
- () =>
- (globalCache.value.get(deps.value) && globalCache.value.get(deps.value)![1]) ||
- cacheEntity![1],
- );
-
- // Remove if no need anymore
- useCompatibleInsertionEffect(
- () => {
- onCacheEffect?.(cacheContent.value);
- },
- polyfill => {
- // It's bad to call build again in effect.
- // But we have to do this since StrictMode will call effect twice
- // which will clear cache on the first time.
- buildCache(([times, cache]) => {
- if (polyfill && times === 0) {
- onCacheEffect?.(cacheContent.value);
- }
- return [times + 1, cache];
- });
-
- return () => {
- globalCache.value.update(deps.value, prevCache => {
- const [times = 0, cache] = prevCache || [];
- const nextCount = times - 1;
- if (nextCount <= 0) {
- if (polyfill || !globalCache.value.get(deps.value)) {
- onCacheRemove?.(cache, false);
- }
- return null;
- }
-
- return [times - 1, cache];
- });
- };
- },
- deps,
- );
-
- onBeforeUnmount(() => {
- buildCache();
- });
-
- return cacheContent;
-}
diff --git a/components/_util/_cssinjs/hooks/useHMR.ts b/components/_util/_cssinjs/hooks/useHMR.ts
deleted file mode 100644
index ff54518b89..0000000000
--- a/components/_util/_cssinjs/hooks/useHMR.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-function useProdHMR() {
- return false;
-}
-
-let webpackHMR = false;
-
-function useDevHMR() {
- return webpackHMR;
-}
-
-export default process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR;
-
-// Webpack `module.hot.accept` do not support any deps update trigger
-// We have to hack handler to force mark as HRM
-if (
- process.env.NODE_ENV !== 'production' &&
- typeof module !== 'undefined' &&
- module &&
- (module as any).hot &&
- typeof window !== 'undefined'
-) {
- const win = window as any;
- if (typeof win.webpackHotUpdate === 'function') {
- const originWebpackHotUpdate = win.webpackHotUpdate;
-
- win.webpackHotUpdate = (...args: any[]) => {
- webpackHMR = true;
- setTimeout(() => {
- webpackHMR = false;
- }, 0);
- return originWebpackHotUpdate(...args);
- };
- }
-}
diff --git a/components/_util/_cssinjs/index.ts b/components/_util/_cssinjs/index.ts
deleted file mode 100644
index 5dc10a654c..0000000000
--- a/components/_util/_cssinjs/index.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import extractStyle from './extractStyle';
-import useCacheToken, { getComputedToken } from './hooks/useCacheToken';
-import useCSSVarRegister from './hooks/useCSSVarRegister';
-import type { CSSInterpolation, CSSObject } from './hooks/useStyleRegister';
-import useStyleRegister from './hooks/useStyleRegister';
-import Keyframes from './Keyframes';
-import type { Linter } from './linters';
-import {
- legacyNotSelectorLinter,
- logicalPropertiesLinter,
- NaNLinter,
- parentSelectorLinter,
-} from './linters';
-import type { StyleProviderProps } from './StyleContext';
-import { createCache, StyleProvider } from './StyleContext';
-import type { DerivativeFunc, TokenType } from './theme';
-import { createTheme, Theme } from './theme';
-import type { Transformer } from './transformers/interface';
-import legacyLogicalPropertiesTransformer from './transformers/legacyLogicalProperties';
-import px2remTransformer from './transformers/px2rem';
-import { supportLogicProps, supportWhere, unit } from './util';
-import { token2CSSVar } from './util/css-variables';
-
-export {
- Theme,
- createTheme,
- useStyleRegister,
- useCSSVarRegister,
- useCacheToken,
- createCache,
- StyleProvider,
- Keyframes,
- extractStyle,
- getComputedToken,
-
- // Transformer
- legacyLogicalPropertiesTransformer,
- px2remTransformer,
-
- // Linters
- logicalPropertiesLinter,
- legacyNotSelectorLinter,
- parentSelectorLinter,
- NaNLinter,
-
- // util
- token2CSSVar,
- unit,
-};
-export type {
- TokenType,
- CSSObject,
- CSSInterpolation,
- DerivativeFunc,
- Transformer,
- Linter,
- StyleProviderProps,
-};
-
-export const _experimental = {
- supportModernCSS: () => supportWhere() && supportLogicProps(),
-};
diff --git a/components/_util/_cssinjs/linters/contentQuotesLinter.ts b/components/_util/_cssinjs/linters/contentQuotesLinter.ts
deleted file mode 100644
index b1e60f08ce..0000000000
--- a/components/_util/_cssinjs/linters/contentQuotesLinter.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Linter } from './interface';
-import { lintWarning } from './utils';
-
-const linter: Linter = (key, value, info) => {
- if (key === 'content') {
- // From emotion: https://github.com/emotion-js/emotion/blob/main/packages/serialize/src/index.js#L63
- const contentValuePattern =
- /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
- const contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
- if (
- typeof value !== 'string' ||
- (contentValues.indexOf(value) === -1 &&
- !contentValuePattern.test(value) &&
- (value.charAt(0) !== value.charAt(value.length - 1) ||
- (value.charAt(0) !== '"' && value.charAt(0) !== "'")))
- ) {
- lintWarning(
- `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\`.`,
- info,
- );
- }
- }
-};
-
-export default linter;
diff --git a/components/_util/_cssinjs/linters/hashedAnimationLinter.ts b/components/_util/_cssinjs/linters/hashedAnimationLinter.ts
deleted file mode 100644
index 4c6fc948b3..0000000000
--- a/components/_util/_cssinjs/linters/hashedAnimationLinter.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Linter } from './interface';
-import { lintWarning } from './utils';
-
-const linter: Linter = (key, value, info) => {
- if (key === 'animation') {
- if (info.hashId && value !== 'none') {
- lintWarning(
- `You seem to be using hashed animation '${value}', in which case 'animationName' with Keyframe as value is recommended.`,
- info,
- );
- }
- }
-};
-
-export default linter;
diff --git a/components/_util/_cssinjs/linters/index.ts b/components/_util/_cssinjs/linters/index.ts
deleted file mode 100644
index 2e31efe53d..0000000000
--- a/components/_util/_cssinjs/linters/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as contentQuotesLinter } from './contentQuotesLinter';
-export { default as hashedAnimationLinter } from './hashedAnimationLinter';
-export type { Linter } from './interface';
-export { default as legacyNotSelectorLinter } from './legacyNotSelectorLinter';
-export { default as logicalPropertiesLinter } from './logicalPropertiesLinter';
-export { default as NaNLinter } from './NaNLinter';
-export { default as parentSelectorLinter } from './parentSelectorLinter';
diff --git a/components/_util/_cssinjs/linters/interface.ts b/components/_util/_cssinjs/linters/interface.ts
deleted file mode 100644
index 2df3b6bc2f..0000000000
--- a/components/_util/_cssinjs/linters/interface.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface LinterInfo {
- path?: string;
- hashId?: string;
- parentSelectors: string[];
-}
-
-export interface Linter {
- (key: string, value: string | number, info: LinterInfo): void;
-}
diff --git a/components/_util/_cssinjs/linters/legacyNotSelectorLinter.ts b/components/_util/_cssinjs/linters/legacyNotSelectorLinter.ts
deleted file mode 100644
index f38bf5a331..0000000000
--- a/components/_util/_cssinjs/linters/legacyNotSelectorLinter.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Linter, LinterInfo } from './interface';
-import { lintWarning } from './utils';
-
-function isConcatSelector(selector: string) {
- const notContent = selector.match(/:not\(([^)]*)\)/)?.[1] || '';
-
- // split selector. e.g.
- // `h1#a.b` => ['h1', #a', '.b']
- const splitCells = notContent.split(/(\[[^[]*])|(?=[.#])/).filter(str => str);
-
- return splitCells.length > 1;
-}
-
-function parsePath(info: LinterInfo) {
- return info.parentSelectors.reduce((prev, cur) => {
- if (!prev) {
- return cur;
- }
-
- return cur.includes('&') ? cur.replace(/&/g, prev) : `${prev} ${cur}`;
- }, '');
-}
-
-const linter: Linter = (_key, _value, info) => {
- const parentSelectorPath = parsePath(info);
- const notList = parentSelectorPath.match(/:not\([^)]*\)/g) || [];
-
- if (notList.length > 0 && notList.some(isConcatSelector)) {
- lintWarning(`Concat ':not' selector not support in legacy browsers.`, info);
- }
-};
-
-export default linter;
diff --git a/components/_util/_cssinjs/linters/logicalPropertiesLinter.ts b/components/_util/_cssinjs/linters/logicalPropertiesLinter.ts
deleted file mode 100644
index bdddcf73f4..0000000000
--- a/components/_util/_cssinjs/linters/logicalPropertiesLinter.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { Linter } from './interface';
-import { lintWarning } from './utils';
-
-const linter: Linter = (key, value, info) => {
- switch (key) {
- case 'marginLeft':
- case 'marginRight':
- case 'paddingLeft':
- case 'paddingRight':
- case 'left':
- case 'right':
- case 'borderLeft':
- case 'borderLeftWidth':
- case 'borderLeftStyle':
- case 'borderLeftColor':
- case 'borderRight':
- case 'borderRightWidth':
- case 'borderRightStyle':
- case 'borderRightColor':
- case 'borderTopLeftRadius':
- case 'borderTopRightRadius':
- case 'borderBottomLeftRadius':
- case 'borderBottomRightRadius':
- lintWarning(
- `You seem to be using non-logical property '${key}' which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
- info,
- );
- return;
- case 'margin':
- case 'padding':
- case 'borderWidth':
- case 'borderStyle':
- // case 'borderColor':
- if (typeof value === 'string') {
- const valueArr = value.split(' ').map(item => item.trim());
- if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) {
- lintWarning(
- `You seem to be using '${key}' property with different left ${key} and right ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
- info,
- );
- }
- }
- return;
- case 'clear':
- case 'textAlign':
- if (value === 'left' || value === 'right') {
- lintWarning(
- `You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
- info,
- );
- }
- return;
- case 'borderRadius':
- if (typeof value === 'string') {
- const radiusGroups = value.split('/').map(item => item.trim());
- const invalid = radiusGroups.reduce((result, group) => {
- if (result) {
- return result;
- }
- const radiusArr = group.split(' ').map(item => item.trim());
- // borderRadius: '2px 4px'
- if (radiusArr.length >= 2 && radiusArr[0] !== radiusArr[1]) {
- return true;
- }
- // borderRadius: '4px 4px 2px'
- if (radiusArr.length === 3 && radiusArr[1] !== radiusArr[2]) {
- return true;
- }
- // borderRadius: '4px 4px 2px 4px'
- if (radiusArr.length === 4 && radiusArr[2] !== radiusArr[3]) {
- return true;
- }
- return result;
- }, false);
-
- if (invalid) {
- lintWarning(
- `You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
- info,
- );
- }
- }
- return;
- default:
- }
-};
-
-export default linter;
diff --git a/components/_util/_cssinjs/linters/parentSelectorLinter.ts b/components/_util/_cssinjs/linters/parentSelectorLinter.ts
deleted file mode 100644
index 7a061ce8a5..0000000000
--- a/components/_util/_cssinjs/linters/parentSelectorLinter.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Linter } from '..';
-import { lintWarning } from './utils';
-
-const linter: Linter = (_key, _value, info) => {
- if (
- info.parentSelectors.some(selector => {
- const selectors = selector.split(',');
- return selectors.some(item => item.split('&').length > 2);
- })
- ) {
- lintWarning('Should not use more than one `&` in a selector.', info);
- }
-};
-
-export default linter;
diff --git a/components/_util/_cssinjs/linters/utils.ts b/components/_util/_cssinjs/linters/utils.ts
deleted file mode 100644
index 83c80cb3ce..0000000000
--- a/components/_util/_cssinjs/linters/utils.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import devWarning from '../../../vc-util/warning';
-import type { LinterInfo } from './interface';
-
-export function lintWarning(message: string, info: LinterInfo) {
- const { path, parentSelectors } = info;
-
- devWarning(
- false,
- `[Ant Design Vue CSS-in-JS] ${path ? `Error in ${path}: ` : ''}${message}${
- parentSelectors.length ? ` Selector: ${parentSelectors.join(' | ')}` : ''
- }`,
- );
-}
diff --git a/components/_util/_cssinjs/theme/Theme.ts b/components/_util/_cssinjs/theme/Theme.ts
deleted file mode 100644
index 608bdde6cd..0000000000
--- a/components/_util/_cssinjs/theme/Theme.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import warning from '../../warning';
-import type { DerivativeFunc, TokenType } from './interface';
-
-let uuid = 0;
-
-/**
- * Theme with algorithms to derive tokens from design tokens.
- * Use `createTheme` first which will help to manage the theme instance cache.
- */
-export default class Theme<DesignToken extends TokenType, DerivativeToken extends TokenType> {
- private derivatives: DerivativeFunc<DesignToken, DerivativeToken>[];
- public readonly id: number;
-
- constructor(
- derivatives:
- | DerivativeFunc<DesignToken, DerivativeToken>
- | DerivativeFunc<DesignToken, DerivativeToken>[],
- ) {
- this.derivatives = Array.isArray(derivatives) ? derivatives : [derivatives];
- this.id = uuid;
-
- if (derivatives.length === 0) {
- warning(
- derivatives.length > 0,
- '[Ant Design Vue CSS-in-JS] Theme should have at least one derivative function.',
- );
- }
-
- uuid += 1;
- }
-
- getDerivativeToken(token: DesignToken): DerivativeToken {
- return this.derivatives.reduce<DerivativeToken>(
- (result, derivative) => derivative(token, result),
- undefined as any,
- );
- }
-}
diff --git a/components/_util/_cssinjs/theme/ThemeCache.ts b/components/_util/_cssinjs/theme/ThemeCache.ts
deleted file mode 100644
index db76ffa6a4..0000000000
--- a/components/_util/_cssinjs/theme/ThemeCache.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import type Theme from './Theme';
-import type { DerivativeFunc } from './interface';
-
-// ================================== Cache ==================================
-type ThemeCacheMap = Map<
- DerivativeFunc<any, any>,
- {
- map?: ThemeCacheMap;
- value?: [Theme<any, any>, number];
- }
->;
-
-type DerivativeOptions = DerivativeFunc<any, any>[];
-
-export function sameDerivativeOption(left: DerivativeOptions, right: DerivativeOptions) {
- if (left.length !== right.length) {
- return false;
- }
- for (let i = 0; i < left.length; i++) {
- if (left[i] !== right[i]) {
- return false;
- }
- }
- return true;
-}
-
-export default class ThemeCache {
- public static MAX_CACHE_SIZE = 20;
- public static MAX_CACHE_OFFSET = 5;
-
- private readonly cache: ThemeCacheMap;
- private keys: DerivativeOptions[];
- private cacheCallTimes: number;
-
- constructor() {
- this.cache = new Map();
- this.keys = [];
- this.cacheCallTimes = 0;
- }
-
- public size(): number {
- return this.keys.length;
- }
-
- private internalGet(
- derivativeOption: DerivativeOptions,
- updateCallTimes = false,
- ): [Theme<any, any>, number] | undefined {
- let cache: ReturnType<ThemeCacheMap['get']> = { map: this.cache };
- derivativeOption.forEach(derivative => {
- if (!cache) {
- cache = undefined;
- } else {
- cache = cache?.map?.get(derivative);
- }
- });
- if (cache?.value && updateCallTimes) {
- cache.value[1] = this.cacheCallTimes++;
- }
- return cache?.value;
- }
-
- public get(derivativeOption: DerivativeOptions): Theme<any, any> | undefined {
- return this.internalGet(derivativeOption, true)?.[0];
- }
-
- public has(derivativeOption: DerivativeOptions): boolean {
- return !!this.internalGet(derivativeOption);
- }
-
- public set(derivativeOption: DerivativeOptions, value: Theme<any, any>): void {
- // New cache
- if (!this.has(derivativeOption)) {
- if (this.size() + 1 > ThemeCache.MAX_CACHE_SIZE + ThemeCache.MAX_CACHE_OFFSET) {
- const [targetKey] = this.keys.reduce<[DerivativeOptions, number]>(
- (result, key) => {
- const [, callTimes] = result;
- if (this.internalGet(key)![1] < callTimes) {
- return [key, this.internalGet(key)![1]];
- }
- return result;
- },
- [this.keys[0], this.cacheCallTimes],
- );
- this.delete(targetKey);
- }
-
- this.keys.push(derivativeOption);
- }
-
- let cache = this.cache;
- derivativeOption.forEach((derivative, index) => {
- if (index === derivativeOption.length - 1) {
- cache.set(derivative, { value: [value, this.cacheCallTimes++] });
- } else {
- const cacheValue = cache.get(derivative);
- if (!cacheValue) {
- cache.set(derivative, { map: new Map() });
- } else if (!cacheValue.map) {
- cacheValue.map = new Map();
- }
- cache = cache.get(derivative)!.map!;
- }
- });
- }
-
- private deleteByPath(
- currentCache: ThemeCacheMap,
- derivatives: DerivativeFunc<any, any>[],
- ): Theme<any, any> | undefined {
- const cache = currentCache.get(derivatives[0])!;
- if (derivatives.length === 1) {
- if (!cache.map) {
- currentCache.delete(derivatives[0]);
- } else {
- currentCache.set(derivatives[0], { map: cache.map });
- }
- return cache.value?.[0];
- }
- const result = this.deleteByPath(cache.map!, derivatives.slice(1));
- if ((!cache.map || cache.map.size === 0) && !cache.value) {
- currentCache.delete(derivatives[0]);
- }
- return result;
- }
-
- public delete(derivativeOption: DerivativeOptions): Theme<any, any> | undefined {
- // If cache exists
- if (this.has(derivativeOption)) {
- this.keys = this.keys.filter(item => !sameDerivativeOption(item, derivativeOption));
- return this.deleteByPath(this.cache, derivativeOption);
- }
- return undefined;
- }
-}
diff --git a/components/_util/_cssinjs/theme/createTheme.ts b/components/_util/_cssinjs/theme/createTheme.ts
deleted file mode 100644
index 9f73f58a16..0000000000
--- a/components/_util/_cssinjs/theme/createTheme.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import ThemeCache from './ThemeCache';
-import Theme from './Theme';
-import type { DerivativeFunc, TokenType } from './interface';
-
-const cacheThemes = new ThemeCache();
-
-/**
- * Same as new Theme, but will always return same one if `derivative` not changed.
- */
-export default function createTheme<
- DesignToken extends TokenType,
- DerivativeToken extends TokenType,
->(
- derivatives:
- | DerivativeFunc<DesignToken, DerivativeToken>[]
- | DerivativeFunc<DesignToken, DerivativeToken>,
-) {
- const derivativeArr = Array.isArray(derivatives) ? derivatives : [derivatives];
- // Create new theme if not exist
- if (!cacheThemes.has(derivativeArr)) {
- cacheThemes.set(derivativeArr, new Theme(derivativeArr));
- }
-
- // Get theme from cache and return
- return cacheThemes.get(derivativeArr)!;
-}
diff --git a/components/_util/_cssinjs/theme/index.ts b/components/_util/_cssinjs/theme/index.ts
deleted file mode 100644
index b3c2ff4b1e..0000000000
--- a/components/_util/_cssinjs/theme/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as createTheme } from './createTheme';
-export { default as Theme } from './Theme';
-export { default as ThemeCache } from './ThemeCache';
-export type { TokenType, DerivativeFunc } from './interface';
diff --git a/components/_util/_cssinjs/theme/interface.ts b/components/_util/_cssinjs/theme/interface.ts
deleted file mode 100644
index 827706ce2c..0000000000
--- a/components/_util/_cssinjs/theme/interface.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type TokenType = object;
-export type DerivativeFunc<DesignToken extends TokenType, DerivativeToken extends TokenType> = (
- designToken: DesignToken,
- derivativeToken?: DerivativeToken,
-) => DerivativeToken;
diff --git a/components/_util/_cssinjs/transformers/interface.ts b/components/_util/_cssinjs/transformers/interface.ts
deleted file mode 100644
index a7120e8148..0000000000
--- a/components/_util/_cssinjs/transformers/interface.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { CSSObject } from '..';
-
-export interface Transformer {
- visit?: (cssObj: CSSObject) => CSSObject;
-}
diff --git a/components/_util/_cssinjs/transformers/legacyLogicalProperties.ts b/components/_util/_cssinjs/transformers/legacyLogicalProperties.ts
deleted file mode 100644
index 7a33c1a0c5..0000000000
--- a/components/_util/_cssinjs/transformers/legacyLogicalProperties.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import type { CSSObject } from '..';
-import type { Transformer } from './interface';
-
-function splitValues(value: string | number): [values: (string | number)[], important: boolean] {
- if (typeof value === 'number') {
- return [[value], false];
- }
-
- const rawStyle = String(value).trim();
- const importantCells = rawStyle.match(/(.*)(!important)/);
-
- const splitStyle = (importantCells ? importantCells[1] : rawStyle).trim().split(/\s+/);
-
- // Combine styles split in brackets, like `calc(1px + 2px)`
- let temp = '';
- let brackets = 0;
- return [
- splitStyle.reduce<string[]>((list, item) => {
- if (item.includes('(') || item.includes(')')) {
- const left = item.split('(').length - 1;
- const right = item.split(')').length - 1;
- brackets += left - right;
- }
- if (brackets === 0) {
- list.push(temp + item);
- temp = '';
- } else if (brackets > 0) {
- temp += item;
- }
- return list;
- }, []),
- !!importantCells,
- ];
-}
-
-type MatchValue = string[] & {
- notSplit?: boolean;
-};
-
-function noSplit(list: MatchValue): MatchValue {
- list.notSplit = true;
- return list;
-}
-
-const keyMap: Record<string, MatchValue> = {
- // Inset
- inset: ['top', 'right', 'bottom', 'left'],
- insetBlock: ['top', 'bottom'],
- insetBlockStart: ['top'],
- insetBlockEnd: ['bottom'],
- insetInline: ['left', 'right'],
- insetInlineStart: ['left'],
- insetInlineEnd: ['right'],
-
- // Margin
- marginBlock: ['marginTop', 'marginBottom'],
- marginBlockStart: ['marginTop'],
- marginBlockEnd: ['marginBottom'],
- marginInline: ['marginLeft', 'marginRight'],
- marginInlineStart: ['marginLeft'],
- marginInlineEnd: ['marginRight'],
-
- // Padding
- paddingBlock: ['paddingTop', 'paddingBottom'],
- paddingBlockStart: ['paddingTop'],
- paddingBlockEnd: ['paddingBottom'],
- paddingInline: ['paddingLeft', 'paddingRight'],
- paddingInlineStart: ['paddingLeft'],
- paddingInlineEnd: ['paddingRight'],
-
- // Border
- borderBlock: noSplit(['borderTop', 'borderBottom']),
- borderBlockStart: noSplit(['borderTop']),
- borderBlockEnd: noSplit(['borderBottom']),
- borderInline: noSplit(['borderLeft', 'borderRight']),
- borderInlineStart: noSplit(['borderLeft']),
- borderInlineEnd: noSplit(['borderRight']),
-
- // Border width
- borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'],
- borderBlockStartWidth: ['borderTopWidth'],
- borderBlockEndWidth: ['borderBottomWidth'],
- borderInlineWidth: ['borderLeftWidth', 'borderRightWidth'],
- borderInlineStartWidth: ['borderLeftWidth'],
- borderInlineEndWidth: ['borderRightWidth'],
-
- // Border style
- borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'],
- borderBlockStartStyle: ['borderTopStyle'],
- borderBlockEndStyle: ['borderBottomStyle'],
- borderInlineStyle: ['borderLeftStyle', 'borderRightStyle'],
- borderInlineStartStyle: ['borderLeftStyle'],
- borderInlineEndStyle: ['borderRightStyle'],
-
- // Border color
- borderBlockColor: ['borderTopColor', 'borderBottomColor'],
- borderBlockStartColor: ['borderTopColor'],
- borderBlockEndColor: ['borderBottomColor'],
- borderInlineColor: ['borderLeftColor', 'borderRightColor'],
- borderInlineStartColor: ['borderLeftColor'],
- borderInlineEndColor: ['borderRightColor'],
-
- // Border radius
- borderStartStartRadius: ['borderTopLeftRadius'],
- borderStartEndRadius: ['borderTopRightRadius'],
- borderEndStartRadius: ['borderBottomLeftRadius'],
- borderEndEndRadius: ['borderBottomRightRadius'],
-};
-
-function wrapImportantAndSkipCheck(value: string | number, important: boolean) {
- let parsedValue = value;
-
- if (important) {
- parsedValue = `${parsedValue} !important`;
- }
-
- return { _skip_check_: true, value: parsedValue };
-}
-
-/**
- * Convert css logical properties to legacy properties.
- * Such as: `margin-block-start` to `margin-top`.
- * Transform list:
- * - inset
- * - margin
- * - padding
- * - border
- */
-const transform: Transformer = {
- visit: cssObj => {
- const clone: CSSObject = {};
-
- Object.keys(cssObj).forEach(key => {
- const value = cssObj[key];
- const matchValue = keyMap[key];
-
- if (matchValue && (typeof value === 'number' || typeof value === 'string')) {
- const [values, important] = splitValues(value);
-
- if (matchValue.length && matchValue.notSplit) {
- // not split means always give same value like border
- matchValue.forEach(matchKey => {
- clone[matchKey] = wrapImportantAndSkipCheck(value, important);
- });
- } else if (matchValue.length === 1) {
- // Handle like `marginBlockStart` => `marginTop`
- clone[matchValue[0]] = wrapImportantAndSkipCheck(value, important);
- } else if (matchValue.length === 2) {
- // Handle like `marginBlock` => `marginTop` & `marginBottom`
- matchValue.forEach((matchKey, index) => {
- clone[matchKey] = wrapImportantAndSkipCheck(values[index] ?? values[0], important);
- });
- } else if (matchValue.length === 4) {
- // Handle like `inset` => `top` & `right` & `bottom` & `left`
- matchValue.forEach((matchKey, index) => {
- clone[matchKey] = wrapImportantAndSkipCheck(
- values[index] ?? values[index - 2] ?? values[0],
- important,
- );
- });
- } else {
- clone[key] = value;
- }
- } else {
- clone[key] = value;
- }
- });
-
- return clone;
- },
-};
-
-export default transform;
diff --git a/components/_util/_cssinjs/transformers/px2rem.ts b/components/_util/_cssinjs/transformers/px2rem.ts
deleted file mode 100644
index 593a107b24..0000000000
--- a/components/_util/_cssinjs/transformers/px2rem.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * respect https://github.com/cuth/postcss-pxtorem
- */
-// @ts-ignore
-import unitless from '@emotion/unitless';
-import type { CSSObject } from '..';
-import type { Transformer } from './interface';
-
-export interface Options {
- /**
- * The root font size.
- * @default 16
- */
- rootValue?: number;
- /**
- * The decimal numbers to allow the REM units to grow to.
- * @default 5
- */
- precision?: number;
- /**
- * Whether to allow px to be converted in media queries.
- * @default false
- */
- mediaQuery?: boolean;
-}
-
-const pxRegex = /url\([^)]+\)|var\([^)]+\)|(\d*\.?\d+)px/g;
-
-function toFixed(number: number, precision: number) {
- const multiplier = Math.pow(10, precision + 1),
- wholeNumber = Math.floor(number * multiplier);
- return (Math.round(wholeNumber / 10) * 10) / multiplier;
-}
-
-const transform = (options: Options = {}): Transformer => {
- const { rootValue = 16, precision = 5, mediaQuery = false } = options;
-
- const pxReplace = (m: string, $1: any) => {
- if (!$1) return m;
- const pixels = parseFloat($1);
- // covenant: pixels <= 1, not transform to rem @zombieJ
- if (pixels <= 1) return m;
- const fixedVal = toFixed(pixels / rootValue, precision);
- return `${fixedVal}rem`;
- };
-
- const visit = (cssObj: CSSObject): CSSObject => {
- const clone: CSSObject = { ...cssObj };
-
- Object.entries(cssObj).forEach(([key, value]) => {
- if (typeof value === 'string' && value.includes('px')) {
- const newValue = value.replace(pxRegex, pxReplace);
- clone[key] = newValue;
- }
-
- // no unit
- if (!unitless[key] && typeof value === 'number' && value !== 0) {
- clone[key] = `${value}px`.replace(pxRegex, pxReplace);
- }
-
- // Media queries
- const mergedKey = key.trim();
- if (mergedKey.startsWith('@') && mergedKey.includes('px') && mediaQuery) {
- const newKey = key.replace(pxRegex, pxReplace);
-
- clone[newKey] = clone[key];
- delete clone[key];
- }
- });
-
- return clone;
- };
-
- return { visit };
-};
-
-export default transform;
diff --git a/components/_util/cssinjs/Cache.ts b/components/_util/cssinjs/Cache.ts
index 010a0e3f6c..cff14b4752 100644
--- a/components/_util/cssinjs/Cache.ts
+++ b/components/_util/cssinjs/Cache.ts
@@ -1,11 +1,14 @@
export type KeyType = string | number;
type ValueType = [number, any]; // [times, realValue]
+
const SPLIT = '%';
+
class Entity {
instanceId: string;
constructor(instanceId: string) {
this.instanceId = instanceId;
}
+
/** @private Internal cache map. Do not access this directly */
cache = new Map<string, ValueType>();
diff --git a/components/_util/cssinjs/StyleContext.tsx b/components/_util/cssinjs/StyleContext.tsx
index faf49f4b5d..6d062eece2 100644
--- a/components/_util/cssinjs/StyleContext.tsx
+++ b/components/_util/cssinjs/StyleContext.tsx
@@ -31,7 +31,6 @@ export function createCache() {
Array.from(styles).forEach(style => {
(style as any)[CSS_IN_JS_INSTANCE] = (style as any)[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
- // Not force move if no head
// Not force move if no head
if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
document.head.insertBefore(style, firstChild);
diff --git a/components/_util/_cssinjs/extractStyle.ts b/components/_util/cssinjs/extractStyle.ts
similarity index 100%
rename from components/_util/_cssinjs/extractStyle.ts
rename to components/_util/cssinjs/extractStyle.ts
diff --git a/components/_util/_cssinjs/hooks/useCSSVarRegister.ts b/components/_util/cssinjs/hooks/useCSSVarRegister.ts
similarity index 100%
rename from components/_util/_cssinjs/hooks/useCSSVarRegister.ts
rename to components/_util/cssinjs/hooks/useCSSVarRegister.ts
diff --git a/components/_util/cssinjs/hooks/useCacheToken.tsx b/components/_util/cssinjs/hooks/useCacheToken.tsx
index f97d146b55..6067cdd62a 100644
--- a/components/_util/cssinjs/hooks/useCacheToken.tsx
+++ b/components/_util/cssinjs/hooks/useCacheToken.tsx
@@ -1,20 +1,19 @@
import hash from '@emotion/hash';
-import { ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
+import { updateCSS } from '../../../vc-util/Dom/dynamicCSS';
+import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
import type Theme from '../theme/Theme';
+import { flattenToken, memoResult, token2key, toStyleStr } from '../util';
+import { transformToken } from '../util/css-variables';
+import type { ExtractStyle } from './useGlobalCache';
import useGlobalCache from './useGlobalCache';
-import { flattenToken, token2key } from '../util';
import type { Ref } from 'vue';
import { ref, computed } from 'vue';
const EMPTY_OVERRIDE = {};
-const isProduction = process.env.NODE_ENV === 'production';
-// nuxt generate when NODE_ENV is prerender
-const isPrerender = process.env.NODE_ENV === 'prerender';
-
// Generate different prefix to make user selector break in production env.
// This helps developer not to do style override directly on the hash id.
-const hashPrefix = !isProduction && !isPrerender ? 'css-dev-only-do-not-override' : 'css';
+const hashPrefix = process.env.NODE_ENV !== 'production' ? 'css-dev-only-do-not-override' : 'css';
export interface Option<DerivativeToken, DesignToken> {
/**
@@ -46,6 +45,22 @@ export interface Option<DerivativeToken, DesignToken> {
override: object,
theme: Theme<any, any>,
) => DerivativeToken;
+
+ /**
+ * Transform token to css variables.
+ */
+ cssVar?: {
+ /** Prefix for css variables */
+ prefix?: string;
+ /** Tokens that should not be appended with unit */
+ unitless?: Record<string, boolean>;
+ /** Tokens that should not be transformed to css variables */
+ ignore?: Record<string, boolean>;
+ /** Tokens that preserves origin value */
+ preserve?: Record<string, boolean>;
+ /** Key for current theme. Useful for customizing and should be unique */
+ key?: string;
+ };
}
const tokenKeys = new Map<string, number>();
@@ -94,6 +109,7 @@ export const getComputedToken = <DerivativeToken = object, DesignToken = Derivat
format?: (token: DesignToken) => DerivativeToken,
) => {
const derivativeToken = theme.getDerivativeToken(originToken);
+
// Merge with override
let mergedDerivativeToken = {
...derivativeToken,
@@ -108,6 +124,16 @@ export const getComputedToken = <DerivativeToken = object, DesignToken = Derivat
return mergedDerivativeToken;
};
+export const TOKEN_PREFIX = 'token';
+
+type TokenCacheValue<DerivativeToken> = [
+ token: DerivativeToken & { _tokenKey: string; _themeKey: string },
+ hashId: string,
+ realToken: DerivativeToken & { _tokenKey: string },
+ cssVarStr: string,
+ cssVarKey: string,
+];
+
/**
* Cache theme derivative token as global shared one
* @param theme Theme entity
@@ -119,21 +145,27 @@ export default function useCacheToken<DerivativeToken = object, DesignToken = De
theme: Ref<Theme<any, any>>,
tokens: Ref<Partial<DesignToken>[]>,
option: Ref<Option<DerivativeToken, DesignToken>> = ref({}),
-) {
- const style = useStyleInject();
+): Ref<TokenCacheValue<DerivativeToken>> {
+ const styleContext = useStyleInject();
// Basic - We do basic cache here
- const mergedToken = computed(() => Object.assign({}, ...tokens.value));
+ const mergedToken = computed(() =>
+ memoResult(() => Object.assign({}, ...tokens.value), tokens.value),
+ );
+
const tokenStr = computed(() => flattenToken(mergedToken.value));
- const overrideTokenStr = computed(() => flattenToken(option.value.override || EMPTY_OVERRIDE));
+ const overrideTokenStr = computed(() => flattenToken(option.value.override ?? EMPTY_OVERRIDE));
- const cachedToken = useGlobalCache<[DerivativeToken & { _tokenKey: string }, string]>(
- 'token',
+ const cssVarStr = computed(() => (option.value.cssVar ? flattenToken(option.value.cssVar) : ''));
+
+ const cachedToken = useGlobalCache<TokenCacheValue<DerivativeToken>>(
+ TOKEN_PREFIX,
computed(() => [
- option.value.salt || '',
- theme.value.id,
+ option.value.salt ?? '',
+ theme.value?.id,
tokenStr.value,
overrideTokenStr.value,
+ cssVarStr.value,
]),
() => {
const {
@@ -141,25 +173,82 @@ export default function useCacheToken<DerivativeToken = object, DesignToken = De
override = EMPTY_OVERRIDE,
formatToken,
getComputedToken: compute,
+ cssVar,
} = option.value;
- const mergedDerivativeToken = compute
+ let mergedDerivativeToken = compute
? compute(mergedToken.value, override, theme.value)
: getComputedToken(mergedToken.value, override, theme.value, formatToken);
+ // Replace token value with css variables
+ const actualToken = { ...mergedDerivativeToken };
+ let cssVarsStr = '';
+ if (!!cssVar) {
+ [mergedDerivativeToken, cssVarsStr] = transformToken(mergedDerivativeToken, cssVar.key!, {
+ prefix: cssVar.prefix,
+ ignore: cssVar.ignore,
+ unitless: cssVar.unitless,
+ preserve: cssVar.preserve,
+ });
+ }
+
// Optimize for `useStyleRegister` performance
const tokenKey = token2key(mergedDerivativeToken, salt);
mergedDerivativeToken._tokenKey = tokenKey;
- recordCleanToken(tokenKey);
+ actualToken._tokenKey = token2key(actualToken, salt);
+
+ const themeKey = cssVar?.key ?? tokenKey;
+ mergedDerivativeToken._themeKey = themeKey;
+ recordCleanToken(themeKey);
const hashId = `${hashPrefix}-${hash(tokenKey)}`;
mergedDerivativeToken._hashId = hashId; // Not used
- return [mergedDerivativeToken, hashId];
+
+ return [mergedDerivativeToken, hashId, actualToken, cssVarsStr, cssVar?.key || ''];
},
cache => {
// Remove token will remove all related style
- cleanTokenStyle(cache[0]._tokenKey, style.value?.cache.instanceId);
+ cleanTokenStyle(cache[0]._themeKey, styleContext.value?.cache?.instanceId);
+ },
+ ([token, , , cssVarsStr]) => {
+ const { cssVar } = option.value;
+ if (cssVar && cssVarsStr) {
+ const style = updateCSS(cssVarsStr, hash(`css-variables-${token._themeKey}`), {
+ mark: ATTR_MARK,
+ prepend: 'queue',
+ attachTo: styleContext.value?.container,
+ priority: -999,
+ });
+
+ (style as any)[CSS_IN_JS_INSTANCE] = styleContext.value?.cache?.instanceId;
+
+ // Used for `useCacheToken` to remove on batch when token removed
+ style.setAttribute(ATTR_TOKEN, token._themeKey);
+ }
},
);
return cachedToken;
}
+
+export const extract: ExtractStyle<TokenCacheValue<any>> = (cache, _effectStyles, options) => {
+ const [, , realToken, styleStr, cssVarKey] = cache;
+ const { plain } = options || {};
+
+ if (!styleStr) {
+ return null;
+ }
+
+ const styleId = realToken._tokenKey;
+ const order = -999;
+
+ // ====================== Style ======================
+ // Used for rc-util
+ const sharedAttrs = {
+ 'data-vc-order': 'prependQueue',
+ 'data-vc-priority': `${order}`,
+ };
+
+ const styleText = toStyleStr(styleStr, cssVarKey, styleId, sharedAttrs, plain);
+
+ return [order, styleId, styleText];
+};
diff --git a/components/_util/_cssinjs/hooks/useCompatibleInsertionEffect.tsx b/components/_util/cssinjs/hooks/useCompatibleInsertionEffect.tsx
similarity index 100%
rename from components/_util/_cssinjs/hooks/useCompatibleInsertionEffect.tsx
rename to components/_util/cssinjs/hooks/useCompatibleInsertionEffect.tsx
diff --git a/components/_util/_cssinjs/hooks/useEffectCleanupRegister.ts b/components/_util/cssinjs/hooks/useEffectCleanupRegister.ts
similarity index 100%
rename from components/_util/_cssinjs/hooks/useEffectCleanupRegister.ts
rename to components/_util/cssinjs/hooks/useEffectCleanupRegister.ts
diff --git a/components/_util/cssinjs/hooks/useGlobalCache.tsx b/components/_util/cssinjs/hooks/useGlobalCache.tsx
index 4a4940ced1..de2e707558 100644
--- a/components/_util/cssinjs/hooks/useGlobalCache.tsx
+++ b/components/_util/cssinjs/hooks/useGlobalCache.tsx
@@ -1,58 +1,115 @@
import { useStyleInject } from '../StyleContext';
import type { KeyType } from '../Cache';
+import useCompatibleInsertionEffect from './useCompatibleInsertionEffect';
import useHMR from './useHMR';
import type { ShallowRef, Ref } from 'vue';
-import { onBeforeUnmount, watch, watchEffect, shallowRef } from 'vue';
-export default function useClientCache<CacheType>(
+import { onBeforeUnmount, watch, computed } from 'vue';
+
+export type ExtractStyle<CacheValue> = (
+ cache: CacheValue,
+ effectStyles: Record<string, boolean>,
+ options?: {
+ plain?: boolean;
+ },
+) => [order: number, styleId: string, style: string] | null;
+
+export default function useGlobalCache<CacheType>(
prefix: string,
keyPath: Ref<KeyType[]>,
cacheFn: () => CacheType,
onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void,
+ // Add additional effect trigger by `useInsertionEffect`
+ onCacheEffect?: (cachedValue: CacheType) => void,
): ShallowRef<CacheType> {
const styleContext = useStyleInject();
- const fullPathStr = shallowRef('');
- const res = shallowRef<CacheType>();
- watchEffect(() => {
- fullPathStr.value = [prefix, ...keyPath.value].join('%');
- });
+ const globalCache = computed(() => styleContext.value?.cache);
+ const deps = computed(() => [prefix, ...keyPath.value].join('%'));
+
const HMRUpdate = useHMR();
- const clearCache = (pathStr: string) => {
- styleContext.value.cache.update(pathStr, prevCache => {
- const [times = 0, cache] = prevCache || [];
- const nextCount = times - 1;
- if (nextCount === 0) {
- onCacheRemove?.(cache, false);
- return null;
+
+ type UpdaterArgs = [times: number, cache: CacheType];
+
+ const buildCache = (updater?: (data: UpdaterArgs) => UpdaterArgs) => {
+ globalCache.value.update(deps.value, prevCache => {
+ const [times = 0, cache] = prevCache || [undefined, undefined];
+
+ // HMR should always ignore cache since developer may change it
+ let tmpCache = cache;
+ if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) {
+ onCacheRemove?.(tmpCache, HMRUpdate);
+ tmpCache = null;
}
- return [times - 1, cache];
+ const mergedCache = tmpCache || cacheFn();
+
+ const data: UpdaterArgs = [times, mergedCache];
+
+ // Call updater if need additional logic
+ return updater ? updater(data) : data;
});
};
watch(
- fullPathStr,
- (newStr, oldStr) => {
- if (oldStr) clearCache(oldStr);
- // Create cache
- styleContext.value.cache.update(newStr, prevCache => {
- const [times = 0, cache] = prevCache || [];
-
- // HMR should always ignore cache since developer may change it
- let tmpCache = cache;
- if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) {
- onCacheRemove?.(tmpCache, HMRUpdate);
- tmpCache = null;
- }
- const mergedCache = tmpCache || cacheFn();
+ deps,
+ () => {
+ buildCache();
+ },
+ { immediate: true },
+ );
+
+ let cacheEntity = globalCache.value.get(deps.value);
+
+ // HMR clean the cache but not trigger `useMemo` again
+ // Let's fallback of this
+ // ref https://github.com/ant-design/cssinjs/issues/127
+ if (process.env.NODE_ENV !== 'production' && !cacheEntity) {
+ buildCache();
+ cacheEntity = globalCache.value.get(deps.value);
+ }
- return [times + 1, mergedCache];
+ const cacheContent = computed(
+ () =>
+ (globalCache.value.get(deps.value) && globalCache.value.get(deps.value)![1]) ||
+ cacheEntity![1],
+ );
+
+ // Remove if no need anymore
+ useCompatibleInsertionEffect(
+ () => {
+ onCacheEffect?.(cacheContent.value);
+ },
+ polyfill => {
+ // It's bad to call build again in effect.
+ // But we have to do this since StrictMode will call effect twice
+ // which will clear cache on the first time.
+ buildCache(([times, cache]) => {
+ if (polyfill && times === 0) {
+ onCacheEffect?.(cacheContent.value);
+ }
+ return [times + 1, cache];
});
- res.value = styleContext.value.cache.get(fullPathStr.value)![1];
+
+ return () => {
+ globalCache.value.update(deps.value, prevCache => {
+ const [times = 0, cache] = prevCache || [];
+ const nextCount = times - 1;
+ if (nextCount <= 0) {
+ if (polyfill || !globalCache.value.get(deps.value)) {
+ onCacheRemove?.(cache, false);
+ }
+ return null;
+ }
+
+ return [times - 1, cache];
+ });
+ };
},
- { immediate: true },
+ deps,
);
+
onBeforeUnmount(() => {
- clearCache(fullPathStr.value);
+ buildCache();
});
- return res;
+
+ return cacheContent;
}
diff --git a/components/_util/_cssinjs/hooks/useStyleRegister.tsx b/components/_util/cssinjs/hooks/useStyleRegister.tsx
similarity index 100%
rename from components/_util/_cssinjs/hooks/useStyleRegister.tsx
rename to components/_util/cssinjs/hooks/useStyleRegister.tsx
diff --git a/components/_util/cssinjs/hooks/useStyleRegister/cacheMapUtil.ts b/components/_util/cssinjs/hooks/useStyleRegister/cacheMapUtil.ts
deleted file mode 100644
index 69a57c9335..0000000000
--- a/components/_util/cssinjs/hooks/useStyleRegister/cacheMapUtil.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import canUseDom from '../../../../_util/canUseDom';
-import { ATTR_MARK } from '../../StyleContext';
-
-export const ATTR_CACHE_MAP = 'data-ant-cssinjs-cache-path';
-
-/**
- * This marks style from the css file.
- * Which means not exist in `<style />` tag.
- */
-export const CSS_FILE_STYLE = '_FILE_STYLE__';
-
-export function serialize(cachePathMap: Record<string, string>) {
- return Object.keys(cachePathMap)
- .map(path => {
- const hash = cachePathMap[path];
- return `${path}:${hash}`;
- })
- .join(';');
-}
-
-let cachePathMap: Record<string, string>;
-let fromCSSFile = true;
-
-/**
- * @private Test usage only. Can save remove if no need.
- */
-export function reset(mockCache?: Record<string, string>, fromFile = true) {
- cachePathMap = mockCache!;
- fromCSSFile = fromFile;
-}
-
-export function prepare() {
- if (!cachePathMap) {
- cachePathMap = {};
-
- if (canUseDom()) {
- const div = document.createElement('div');
- div.className = ATTR_CACHE_MAP;
- div.style.position = 'fixed';
- div.style.visibility = 'hidden';
- div.style.top = '-9999px';
- document.body.appendChild(div);
-
- let content = getComputedStyle(div).content || '';
- content = content.replace(/^"/, '').replace(/"$/, '');
-
- // Fill data
- content.split(';').forEach(item => {
- const [path, hash] = item.split(':');
- cachePathMap[path] = hash;
- });
-
- // Remove inline record style
- const inlineMapStyle = document.querySelector(`style[${ATTR_CACHE_MAP}]`);
- if (inlineMapStyle) {
- fromCSSFile = false;
- inlineMapStyle.parentNode?.removeChild(inlineMapStyle);
- }
-
- document.body.removeChild(div);
- }
- }
-}
-
-export function existPath(path: string) {
- prepare();
-
- return !!cachePathMap[path];
-}
-
-export function getStyleAndHash(path: string): [style: string | null, hash: string] {
- const hash = cachePathMap[path];
- let styleStr: string | null = null;
-
- if (hash && canUseDom()) {
- if (fromCSSFile) {
- styleStr = CSS_FILE_STYLE;
- } else {
- const style = document.querySelector(`style[${ATTR_MARK}="${cachePathMap[path]}"]`);
-
- if (style) {
- styleStr = style.innerHTML;
- } else {
- // Clean up since not exist anymore
- delete cachePathMap[path];
- }
- }
- }
-
- return [styleStr, hash];
-}
diff --git a/components/_util/cssinjs/hooks/useStyleRegister/index.tsx b/components/_util/cssinjs/hooks/useStyleRegister/index.tsx
deleted file mode 100644
index d264d0744e..0000000000
--- a/components/_util/cssinjs/hooks/useStyleRegister/index.tsx
+++ /dev/null
@@ -1,566 +0,0 @@
-import hash from '@emotion/hash';
-import type * as CSS from 'csstype';
-// @ts-ignore
-import unitless from '@emotion/unitless';
-import { compile, serialize, stringify } from 'stylis';
-import type { Theme, Transformer } from '../..';
-import type Cache from '../../Cache';
-import type Keyframes from '../../Keyframes';
-import type { Linter } from '../../linters';
-import { contentQuotesLinter, hashedAnimationLinter } from '../../linters';
-import type { HashPriority } from '../../StyleContext';
-import {
- useStyleInject,
- ATTR_CACHE_PATH,
- ATTR_MARK,
- ATTR_TOKEN,
- CSS_IN_JS_INSTANCE,
-} from '../../StyleContext';
-import { supportLayer } from '../../util';
-import useGlobalCache from '../useGlobalCache';
-import { removeCSS, updateCSS } from '../../../../vc-util/Dom/dynamicCSS';
-import type { Ref } from 'vue';
-import { computed } from 'vue';
-import type { VueNode } from '../../../type';
-import canUseDom from '../../../../_util/canUseDom';
-
-import {
- ATTR_CACHE_MAP,
- existPath,
- getStyleAndHash,
- serialize as serializeCacheMap,
-} from './cacheMapUtil';
-
-const isClientSide = canUseDom();
-
-const SKIP_CHECK = '_skip_check_';
-const MULTI_VALUE = '_multi_value_';
-export type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & {
- animationName?: CSS.PropertiesFallback<number | string>['animationName'] | Keyframes;
-};
-
-export type CSSPropertiesWithMultiValues = {
- [K in keyof CSSProperties]:
- | CSSProperties[K]
- | readonly Extract<CSSProperties[K], string>[]
- | {
- [SKIP_CHECK]?: boolean;
- [MULTI_VALUE]?: boolean;
- value: CSSProperties[K] | CSSProperties[K][];
- };
-};
-
-export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };
-
-type ArrayCSSInterpolation = readonly CSSInterpolation[];
-
-export type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject;
-
-export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation | Keyframes;
-
-export type CSSOthersObject = Record<string, CSSInterpolation>;
-
-export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {}
-
-// ============================================================================
-// == Parser ==
-// ============================================================================
-// Preprocessor style content to browser support one
-export function normalizeStyle(styleStr: string): string {
- const serialized = serialize(compile(styleStr), stringify);
- return serialized.replace(/\{%%%\:[^;];}/g, ';');
-}
-
-function isCompoundCSSProperty(value: CSSObject[string]) {
- return typeof value === 'object' && value && (SKIP_CHECK in value || MULTI_VALUE in value);
-}
-
-// 注入 hash 值
-function injectSelectorHash(key: string, hashId: string, hashPriority?: HashPriority) {
- if (!hashId) {
- return key;
- }
-
- const hashClassName = `.${hashId}`;
- const hashSelector = hashPriority === 'low' ? `:where(${hashClassName})` : hashClassName;
-
- // 注入 hashId
- const keys = key.split(',').map(k => {
- const fullPath = k.trim().split(/\s+/);
-
- // 如果 Selector 第一个是 HTML Element，那我们就插到它的后面。反之，就插到最前面。
- let firstPath = fullPath[0] || '';
- const htmlElement = firstPath.match(/^\w+/)?.[0] || '';
-
- firstPath = `${htmlElement}${hashSelector}${firstPath.slice(htmlElement.length)}`;
-
- return [firstPath, ...fullPath.slice(1)].join(' ');
- });
- return keys.join(',');
-}
-
-export interface ParseConfig {
- hashId?: string;
- hashPriority?: HashPriority;
- layer?: string;
- path?: string;
- transformers?: Transformer[];
- linters?: Linter[];
-}
-
-export interface ParseInfo {
- root?: boolean;
- injectHash?: boolean;
- parentSelectors: string[];
-}
-
-// Global effect style will mount once and not removed
-// The effect will not save in SSR cache (e.g. keyframes)
-const globalEffectStyleKeys = new Set();
-
-/**
- * @private Test only. Clear the global effect style keys.
- */
-export const _cf =
- process.env.NODE_ENV !== 'production' ? () => globalEffectStyleKeys.clear() : undefined;
-
-// Parse CSSObject to style content
-export const parseStyle = (
- interpolation: CSSInterpolation,
- config: ParseConfig = {},
- { root, injectHash, parentSelectors }: ParseInfo = {
- root: true,
- parentSelectors: [],
- },
-): [
- parsedStr: string,
- // Style content which should be unique on all of the style (e.g. Keyframes).
- // Firefox will flick with same animation name when exist multiple same keyframes.
- effectStyle: Record<string, string>,
-] => {
- const { hashId, layer, path, hashPriority, transformers = [], linters = [] } = config;
- let styleStr = '';
- let effectStyle: Record<string, string> = {};
-
- function parseKeyframes(keyframes: Keyframes) {
- const animationName = keyframes.getName(hashId);
- if (!effectStyle[animationName]) {
- const [parsedStr] = parseStyle(keyframes.style, config, {
- root: false,
- parentSelectors,
- });
-
- effectStyle[animationName] = `@keyframes ${keyframes.getName(hashId)}${parsedStr}`;
- }
- }
-
- function flattenList(list: ArrayCSSInterpolation, fullList: CSSObject[] = []) {
- list.forEach(item => {
- if (Array.isArray(item)) {
- flattenList(item, fullList);
- } else if (item) {
- fullList.push(item as CSSObject);
- }
- });
-
- return fullList;
- }
-
- const flattenStyleList = flattenList(
- Array.isArray(interpolation) ? interpolation : [interpolation],
- );
-
- flattenStyleList.forEach(originStyle => {
- // Only root level can use raw string
- const style: CSSObject = typeof originStyle === 'string' && !root ? {} : originStyle;
-
- if (typeof style === 'string') {
- styleStr += `${style}\n`;
- } else if ((style as any)._keyframe) {
- // Keyframe
- parseKeyframes(style as unknown as Keyframes);
- } else {
- const mergedStyle = transformers.reduce((prev, trans) => trans?.visit?.(prev) || prev, style);
-
- // Normal CSSObject
- Object.keys(mergedStyle).forEach(key => {
- const value = mergedStyle[key];
-
- if (
- typeof value === 'object' &&
- value &&
- (key !== 'animationName' || !(value as Keyframes)._keyframe) &&
- !isCompoundCSSProperty(value)
- ) {
- let subInjectHash = false;
-
- // 当成嵌套对象来处理
- let mergedKey = key.trim();
- // Whether treat child as root. In most case it is false.
- let nextRoot = false;
-
- // 拆分多个选择器
- if ((root || injectHash) && hashId) {
- if (mergedKey.startsWith('@')) {
- // 略过媒体查询，交给子节点继续插入 hashId
- subInjectHash = true;
- } else {
- // 注入 hashId
- mergedKey = injectSelectorHash(key, hashId, hashPriority);
- }
- } else if (root && !hashId && (mergedKey === '&' || mergedKey === '')) {
- // In case of `{ '&': { a: { color: 'red' } } }` or `{ '': { a: { color: 'red' } } }` without hashId,
- // we will get `&{a:{color:red;}}` or `{a:{color:red;}}` string for stylis to compile.
- // But it does not conform to stylis syntax,
- // and finally we will get `{color:red;}` as css, which is wrong.
- // So we need to remove key in root, and treat child `{ a: { color: 'red' } }` as root.
- mergedKey = '';
- nextRoot = true;
- }
-
- const [parsedStr, childEffectStyle] = parseStyle(value as any, config, {
- root: nextRoot,
- injectHash: subInjectHash,
- parentSelectors: [...parentSelectors, mergedKey],
- });
-
- effectStyle = {
- ...effectStyle,
- ...childEffectStyle,
- };
-
- styleStr += `${mergedKey}${parsedStr}`;
- } else {
- function appendStyle(cssKey: string, cssValue: any) {
- if (
- process.env.NODE_ENV !== 'production' &&
- (typeof value !== 'object' || !(value as any)?.[SKIP_CHECK])
- ) {
- [contentQuotesLinter, hashedAnimationLinter, ...linters].forEach(linter =>
- linter(cssKey, cssValue, { path, hashId, parentSelectors }),
- );
- }
-
- // 如果是样式则直接插入
- const styleName = cssKey.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
-
- // Auto suffix with px
- let formatValue = cssValue;
- if (!unitless[cssKey] && typeof formatValue === 'number' && formatValue !== 0) {
- formatValue = `${formatValue}px`;
- }
-
- // handle animationName & Keyframe value
- if (cssKey === 'animationName' && (cssValue as Keyframes)?._keyframe) {
- parseKeyframes(cssValue as Keyframes);
- formatValue = (cssValue as Keyframes).getName(hashId);
- }
-
- styleStr += `${styleName}:${formatValue};`;
- }
- const actualValue = (value as any)?.value ?? value;
- if (
- typeof value === 'object' &&
- (value as any)?.[MULTI_VALUE] &&
- Array.isArray(actualValue)
- ) {
- actualValue.forEach(item => {
- appendStyle(key, item);
- });
- } else {
- appendStyle(key, actualValue);
- }
- }
- });
- }
- });
-
- if (!root) {
- styleStr = `{${styleStr}}`;
- } else if (layer && supportLayer()) {
- const layerCells = layer.split(',');
- const layerName = layerCells[layerCells.length - 1].trim();
- styleStr = `@layer ${layerName} {${styleStr}}`;
-
- // Order of layer if needed
- if (layerCells.length > 1) {
- // zombieJ: stylis do not support layer order, so we need to handle it manually.
- styleStr = `@layer ${layer}{%%%:%}${styleStr}`;
- }
- }
-
- return [styleStr, effectStyle];
-};
-
-// ============================================================================
-// == Register ==
-// ============================================================================
-function uniqueHash(path: (string | number)[], styleStr: string) {
- return hash(`${path.join('%')}${styleStr}`);
-}
-
-// function Empty() {
-// return null;
-// }
-
-/**
- * Register a style to the global style sheet.
- */
-export default function useStyleRegister(
- info: Ref<{
- theme: Theme<any, any>;
- token: any;
- path: string[];
- hashId?: string;
- layer?: string;
- nonce?: string | (() => string);
- clientOnly?: boolean;
- /**
- * Tell cssinjs the insert order of style.
- * It's useful when you need to insert style
- * before other style to overwrite for the same selector priority.
- */
- order?: number;
- }>,
- styleFn: () => CSSInterpolation,
-) {
- const styleContext = useStyleInject();
-
- const tokenKey = computed(() => info.value.token._tokenKey as string);
-
- const fullPath = computed(() => [tokenKey.value, ...info.value.path]);
-
- // Check if need insert style
- let isMergedClientSide = isClientSide;
- if (process.env.NODE_ENV !== 'production' && styleContext.value.mock !== undefined) {
- isMergedClientSide = styleContext.value.mock === 'client';
- }
-
- // const [cacheStyle[0], cacheStyle[1], cacheStyle[2]]
- useGlobalCache<
- [
- styleStr: string,
- tokenKey: string,
- styleId: string,
- effectStyle: Record<string, string>,
- clientOnly: boolean | undefined,
- order: number,
- ]
- >(
- 'style',
- fullPath,
- // Create cache if needed
- () => {
- const { path, hashId, layer, nonce, clientOnly, order = 0 } = info.value;
- const cachePath = fullPath.value.join('|');
- // Get style from SSR inline style directly
- if (existPath(cachePath)) {
- const [inlineCacheStyleStr, styleHash] = getStyleAndHash(cachePath);
- if (inlineCacheStyleStr) {
- return [inlineCacheStyleStr, tokenKey.value, styleHash, {}, clientOnly, order];
- }
- }
- const styleObj = styleFn();
- const { hashPriority, container, transformers, linters, cache } = styleContext.value;
-
- const [parsedStyle, effectStyle] = parseStyle(styleObj, {
- hashId,
- hashPriority,
- layer,
- path: path.join('-'),
- transformers,
- linters,
- });
- const styleStr = normalizeStyle(parsedStyle);
- const styleId = uniqueHash(fullPath.value, styleStr);
-
- if (isMergedClientSide) {
- const mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
- mark: ATTR_MARK,
- prepend: 'queue',
- attachTo: container,
- priority: order,
- };
-
- const nonceStr = typeof nonce === 'function' ? nonce() : nonce;
-
- if (nonceStr) {
- mergedCSSConfig.csp = { nonce: nonceStr };
- }
-
- const style = updateCSS(styleStr, styleId, mergedCSSConfig);
-
- (style as any)[CSS_IN_JS_INSTANCE] = cache.instanceId;
-
- // Used for `useCacheToken` to remove on batch when token removed
- style.setAttribute(ATTR_TOKEN, tokenKey.value);
-
- // Dev usage to find which cache path made this easily
- if (process.env.NODE_ENV !== 'production') {
- style.setAttribute(ATTR_CACHE_PATH, fullPath.value.join('|'));
- }
-
- // Inject client side effect style
- Object.keys(effectStyle).forEach(effectKey => {
- if (!globalEffectStyleKeys.has(effectKey)) {
- globalEffectStyleKeys.add(effectKey);
-
- // Inject
- updateCSS(normalizeStyle(effectStyle[effectKey]), `_effect-${effectKey}`, {
- mark: ATTR_MARK,
- prepend: 'queue',
- attachTo: container,
- });
- }
- });
- }
-
- return [styleStr, tokenKey.value, styleId, effectStyle, clientOnly, order];
- },
- // Remove cache if no need
- ([, , styleId], fromHMR) => {
- if ((fromHMR || styleContext.value.autoClear) && isClientSide) {
- removeCSS(styleId, { mark: ATTR_MARK });
- }
- },
- );
-
- return (node: VueNode) => {
- return node;
- // let styleNode: VueNode;
- // if (!styleContext.ssrInline || isMergedClientSide || !styleContext.defaultCache) {
- // styleNode = <Empty />;
- // } else {
- // styleNode = (
- // <style
- // {...{
- // [ATTR_TOKEN]: cacheStyle.value[1],
- // [ATTR_MARK]: cacheStyle.value[2],
- // }}
- // innerHTML={cacheStyle.value[0]}
- // />
- // );
- // }
-
- // return (
- // <>
- // {styleNode}
- // {node}
- // </>
- // );
- };
-}
-
-// ============================================================================
-// == SSR ==
-// ============================================================================
-export function extractStyle(cache: Cache, plain = false) {
- const matchPrefix = `style%`;
-
- // prefix with `style` is used for `useStyleRegister` to cache style context
- const styleKeys = Array.from(cache.cache.keys()).filter(key => key.startsWith(matchPrefix));
-
- // Common effect styles like animation
- const effectStyles: Record<string, boolean> = {};
-
- // Mapping of cachePath to style hash
- const cachePathMap: Record<string, string> = {};
-
- let styleText = '';
-
- function toStyleStr(
- style: string,
- tokenKey?: string,
- styleId?: string,
- customizeAttrs: Record<string, string> = {},
- ) {
- const attrs: Record<string, string | undefined> = {
- ...customizeAttrs,
- [ATTR_TOKEN]: tokenKey,
- [ATTR_MARK]: styleId,
- };
-
- const attrStr = Object.keys(attrs)
- .map(attr => {
- const val = attrs[attr];
- return val ? `${attr}="${val}"` : null;
- })
- .filter(v => v)
- .join(' ');
-
- return plain ? style : `<style ${attrStr}>${style}</style>`;
- }
-
- // ====================== Fill Style ======================
- type OrderStyle = [order: number, style: string];
-
- const orderStyles: OrderStyle[] = styleKeys
- .map(key => {
- const cachePath = key.slice(matchPrefix.length).replace(/%/g, '|');
-
- const [styleStr, tokenKey, styleId, effectStyle, clientOnly, order]: [
- string,
- string,
- string,
- Record<string, string>,
- boolean,
- number,
- ] = cache.cache.get(key)![1];
-
- // Skip client only style
- if (clientOnly) {
- return null! as OrderStyle;
- }
-
- // ====================== Style ======================
- // Used for vc-util
- const sharedAttrs = {
- 'data-vc-order': 'prependQueue',
- 'data-vc-priority': `${order}`,
- };
-
- let keyStyleText = toStyleStr(styleStr, tokenKey, styleId, sharedAttrs);
-
- // Save cache path with hash mapping
- cachePathMap[cachePath] = styleId;
-
- // =============== Create effect style ===============
- if (effectStyle) {
- Object.keys(effectStyle).forEach(effectKey => {
- // Effect style can be reused
- if (!effectStyles[effectKey]) {
- effectStyles[effectKey] = true;
- keyStyleText += toStyleStr(
- normalizeStyle(effectStyle[effectKey]),
- tokenKey,
- `_effect-${effectKey}`,
- sharedAttrs,
- );
- }
- });
- }
-
- const ret: OrderStyle = [order, keyStyleText];
-
- return ret;
- })
- .filter(o => o);
-
- orderStyles
- .sort((o1, o2) => o1[0] - o2[0])
- .forEach(([, style]) => {
- styleText += style;
- });
-
- // ==================== Fill Cache Path ====================
- styleText += toStyleStr(
- `.${ATTR_CACHE_MAP}{content:"${serializeCacheMap(cachePathMap)}";}`,
- undefined,
- undefined,
- {
- [ATTR_CACHE_MAP]: ATTR_CACHE_MAP,
- },
- );
-
- return styleText;
-}
diff --git a/components/_util/cssinjs/index.ts b/components/_util/cssinjs/index.ts
index 511045180e..5dc10a654c 100644
--- a/components/_util/cssinjs/index.ts
+++ b/components/_util/cssinjs/index.ts
@@ -1,51 +1,37 @@
-import useCacheToken from './hooks/useCacheToken';
+import extractStyle from './extractStyle';
+import useCacheToken, { getComputedToken } from './hooks/useCacheToken';
+import useCSSVarRegister from './hooks/useCSSVarRegister';
import type { CSSInterpolation, CSSObject } from './hooks/useStyleRegister';
-import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
+import useStyleRegister from './hooks/useStyleRegister';
import Keyframes from './Keyframes';
import type { Linter } from './linters';
-import { legacyNotSelectorLinter, logicalPropertiesLinter, parentSelectorLinter } from './linters';
-import type { StyleContextProps, StyleProviderProps } from './StyleContext';
-import { createCache, useStyleInject, useStyleProvider, StyleProvider } from './StyleContext';
+import {
+ legacyNotSelectorLinter,
+ logicalPropertiesLinter,
+ NaNLinter,
+ parentSelectorLinter,
+} from './linters';
+import type { StyleProviderProps } from './StyleContext';
+import { createCache, StyleProvider } from './StyleContext';
import type { DerivativeFunc, TokenType } from './theme';
import { createTheme, Theme } from './theme';
import type { Transformer } from './transformers/interface';
import legacyLogicalPropertiesTransformer from './transformers/legacyLogicalProperties';
import px2remTransformer from './transformers/px2rem';
-import { supportLogicProps, supportWhere } from './util';
+import { supportLogicProps, supportWhere, unit } from './util';
+import { token2CSSVar } from './util/css-variables';
-const cssinjs = {
- Theme,
- createTheme,
- useStyleRegister,
- useCacheToken,
- createCache,
- useStyleInject,
- useStyleProvider,
- Keyframes,
- extractStyle,
-
- // Transformer
- legacyLogicalPropertiesTransformer,
- px2remTransformer,
-
- // Linters
- logicalPropertiesLinter,
- legacyNotSelectorLinter,
- parentSelectorLinter,
-
- // cssinjs
- StyleProvider,
-};
export {
Theme,
createTheme,
useStyleRegister,
+ useCSSVarRegister,
useCacheToken,
createCache,
- useStyleInject,
- useStyleProvider,
+ StyleProvider,
Keyframes,
extractStyle,
+ getComputedToken,
// Transformer
legacyLogicalPropertiesTransformer,
@@ -55,9 +41,11 @@ export {
logicalPropertiesLinter,
legacyNotSelectorLinter,
parentSelectorLinter,
+ NaNLinter,
- // cssinjs
- StyleProvider,
+ // util
+ token2CSSVar,
+ unit,
};
export type {
TokenType,
@@ -66,12 +54,9 @@ export type {
DerivativeFunc,
Transformer,
Linter,
- StyleContextProps,
StyleProviderProps,
};
export const _experimental = {
supportModernCSS: () => supportWhere() && supportLogicProps(),
};
-
-export default cssinjs;
diff --git a/components/_util/_cssinjs/linters/NaNLinter.ts b/components/_util/cssinjs/linters/NaNLinter.ts
similarity index 100%
rename from components/_util/_cssinjs/linters/NaNLinter.ts
rename to components/_util/cssinjs/linters/NaNLinter.ts
diff --git a/components/_util/cssinjs/linters/index.ts b/components/_util/cssinjs/linters/index.ts
index ae7d8cc9a7..2e31efe53d 100644
--- a/components/_util/cssinjs/linters/index.ts
+++ b/components/_util/cssinjs/linters/index.ts
@@ -3,4 +3,5 @@ export { default as hashedAnimationLinter } from './hashedAnimationLinter';
export type { Linter } from './interface';
export { default as legacyNotSelectorLinter } from './legacyNotSelectorLinter';
export { default as logicalPropertiesLinter } from './logicalPropertiesLinter';
+export { default as NaNLinter } from './NaNLinter';
export { default as parentSelectorLinter } from './parentSelectorLinter';
diff --git a/components/_util/cssinjs/linters/utils.ts b/components/_util/cssinjs/linters/utils.ts
index 5b0853ff2f..83c80cb3ce 100644
--- a/components/_util/cssinjs/linters/utils.ts
+++ b/components/_util/cssinjs/linters/utils.ts
@@ -6,8 +6,8 @@ export function lintWarning(message: string, info: LinterInfo) {
devWarning(
false,
- `[Ant Design Vue CSS-in-JS] ${path ? `Error in '${path}': ` : ''}${message}${
- parentSelectors.length ? ` Selector info: ${parentSelectors.join(' -> ')}` : ''
+ `[Ant Design Vue CSS-in-JS] ${path ? `Error in ${path}: ` : ''}${message}${
+ parentSelectors.length ? ` Selector: ${parentSelectors.join(' | ')}` : ''
}`,
);
}
diff --git a/components/_util/cssinjs/transformers/legacyLogicalProperties.ts b/components/_util/cssinjs/transformers/legacyLogicalProperties.ts
index 58e00c89f4..7a33c1a0c5 100644
--- a/components/_util/cssinjs/transformers/legacyLogicalProperties.ts
+++ b/components/_util/cssinjs/transformers/legacyLogicalProperties.ts
@@ -1,34 +1,36 @@
import type { CSSObject } from '..';
import type { Transformer } from './interface';
-function splitValues(value: string | number) {
+function splitValues(value: string | number): [values: (string | number)[], important: boolean] {
if (typeof value === 'number') {
- return [value];
+ return [[value], false];
}
- const splitStyle = String(value).split(/\s+/);
+ const rawStyle = String(value).trim();
+ const importantCells = rawStyle.match(/(.*)(!important)/);
+
+ const splitStyle = (importantCells ? importantCells[1] : rawStyle).trim().split(/\s+/);
// Combine styles split in brackets, like `calc(1px + 2px)`
let temp = '';
let brackets = 0;
- return splitStyle.reduce<string[]>((list, item) => {
- if (item.includes('(')) {
- temp += item;
- brackets += item.split('(').length - 1;
- } else if (item.includes(')')) {
- temp += ` ${item}`;
- brackets -= item.split(')').length - 1;
+ return [
+ splitStyle.reduce<string[]>((list, item) => {
+ if (item.includes('(') || item.includes(')')) {
+ const left = item.split('(').length - 1;
+ const right = item.split(')').length - 1;
+ brackets += left - right;
+ }
if (brackets === 0) {
- list.push(temp);
+ list.push(temp + item);
temp = '';
+ } else if (brackets > 0) {
+ temp += item;
}
- } else if (brackets > 0) {
- temp += ` ${item}`;
- } else {
- list.push(item);
- }
- return list;
- }, []);
+ return list;
+ }, []),
+ !!importantCells,
+ ];
}
type MatchValue = string[] & {
@@ -105,8 +107,14 @@ const keyMap: Record<string, MatchValue> = {
borderEndEndRadius: ['borderBottomRightRadius'],
};
-function skipCheck(value: string | number) {
- return { _skip_check_: true, value };
+function wrapImportantAndSkipCheck(value: string | number, important: boolean) {
+ let parsedValue = value;
+
+ if (important) {
+ parsedValue = `${parsedValue} !important`;
+ }
+
+ return { _skip_check_: true, value: parsedValue };
}
/**
@@ -127,25 +135,28 @@ const transform: Transformer = {
const matchValue = keyMap[key];
if (matchValue && (typeof value === 'number' || typeof value === 'string')) {
- const values = splitValues(value);
+ const [values, important] = splitValues(value);
if (matchValue.length && matchValue.notSplit) {
// not split means always give same value like border
matchValue.forEach(matchKey => {
- clone[matchKey] = skipCheck(value);
+ clone[matchKey] = wrapImportantAndSkipCheck(value, important);
});
} else if (matchValue.length === 1) {
// Handle like `marginBlockStart` => `marginTop`
- clone[matchValue[0]] = skipCheck(value);
+ clone[matchValue[0]] = wrapImportantAndSkipCheck(value, important);
} else if (matchValue.length === 2) {
// Handle like `marginBlock` => `marginTop` & `marginBottom`
matchValue.forEach((matchKey, index) => {
- clone[matchKey] = skipCheck(values[index] ?? values[0]);
+ clone[matchKey] = wrapImportantAndSkipCheck(values[index] ?? values[0], important);
});
} else if (matchValue.length === 4) {
// Handle like `inset` => `top` & `right` & `bottom` & `left`
matchValue.forEach((matchKey, index) => {
- clone[matchKey] = skipCheck(values[index] ?? values[index - 2] ?? values[0]);
+ clone[matchKey] = wrapImportantAndSkipCheck(
+ values[index] ?? values[index - 2] ?? values[0],
+ important,
+ );
});
} else {
clone[key] = value;
diff --git a/components/_util/cssinjs/transformers/px2rem.ts b/components/_util/cssinjs/transformers/px2rem.ts
index 4ada83a7d2..593a107b24 100644
--- a/components/_util/cssinjs/transformers/px2rem.ts
+++ b/components/_util/cssinjs/transformers/px2rem.ts
@@ -1,6 +1,7 @@
/**
* respect https://github.com/cuth/postcss-pxtorem
*/
+// @ts-ignore
import unitless from '@emotion/unitless';
import type { CSSObject } from '..';
import type { Transformer } from './interface';
diff --git a/components/_util/cssinjs/util.ts b/components/_util/cssinjs/util.ts
deleted file mode 100644
index f22b226d88..0000000000
--- a/components/_util/cssinjs/util.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import hash from '@emotion/hash';
-import { removeCSS, updateCSS } from '../../vc-util/Dom/dynamicCSS';
-import canUseDom from '../canUseDom';
-
-import { Theme } from './theme';
-
-// Create a cache here to avoid always loop generate
-const flattenTokenCache = new WeakMap<any, string>();
-
-export function flattenToken(token: any) {
- let str = flattenTokenCache.get(token) || '';
-
- if (!str) {
- Object.keys(token).forEach(key => {
- const value = token[key];
- str += key;
- if (value instanceof Theme) {
- str += value.id;
- } else if (value && typeof value === 'object') {
- str += flattenToken(value);
- } else {
- str += value;
- }
- });
-
- // Put in cache
- flattenTokenCache.set(token, str);
- }
- return str;
-}
-
-/**
- * Convert derivative token to key string
- */
-export function token2key(token: any, salt: string): string {
- return hash(`${salt}_${flattenToken(token)}`);
-}
-
-const randomSelectorKey = `random-${Date.now()}-${Math.random()}`.replace(/\./g, '');
-
-// Magic `content` for detect selector support
-const checkContent = '_bAmBoO_';
-
-function supportSelector(
- styleStr: string,
- handleElement: (ele: HTMLElement) => void,
- supportCheck?: (ele: HTMLElement) => boolean,
-): boolean {
- if (canUseDom()) {
- updateCSS(styleStr, randomSelectorKey);
-
- const ele = document.createElement('div');
- ele.style.position = 'fixed';
- ele.style.left = '0';
- ele.style.top = '0';
- handleElement?.(ele);
- document.body.appendChild(ele);
-
- if (process.env.NODE_ENV !== 'production') {
- ele.innerHTML = 'Test';
- ele.style.zIndex = '9999999';
- }
-
- const support = supportCheck
- ? supportCheck(ele)
- : getComputedStyle(ele).content?.includes(checkContent);
-
- ele.parentNode?.removeChild(ele);
- removeCSS(randomSelectorKey);
-
- return support;
- }
-
- return false;
-}
-
-let canLayer: boolean | undefined = undefined;
-export function supportLayer(): boolean {
- if (canLayer === undefined) {
- canLayer = supportSelector(
- `@layer ${randomSelectorKey} { .${randomSelectorKey} { content: "${checkContent}"!important; } }`,
- ele => {
- ele.className = randomSelectorKey;
- },
- );
- }
-
- return canLayer!;
-}
-
-let canWhere: boolean | undefined = undefined;
-export function supportWhere(): boolean {
- if (canWhere === undefined) {
- canWhere = supportSelector(
- `:where(.${randomSelectorKey}) { content: "${checkContent}"!important; }`,
- ele => {
- ele.className = randomSelectorKey;
- },
- );
- }
-
- return canWhere!;
-}
-
-let canLogic: boolean | undefined = undefined;
-export function supportLogicProps(): boolean {
- if (canLogic === undefined) {
- canLogic = supportSelector(
- `.${randomSelectorKey} { inset-block: 93px !important; }`,
- ele => {
- ele.className = randomSelectorKey;
- },
- ele => getComputedStyle(ele).bottom === '93px',
- );
- }
-
- return canLogic!;
-}
diff --git a/components/_util/_cssinjs/util/cacheMapUtil.ts b/components/_util/cssinjs/util/cacheMapUtil.ts
similarity index 100%
rename from components/_util/_cssinjs/util/cacheMapUtil.ts
rename to components/_util/cssinjs/util/cacheMapUtil.ts
diff --git a/components/_util/_cssinjs/util/css-variables.ts b/components/_util/cssinjs/util/css-variables.ts
similarity index 100%
rename from components/_util/_cssinjs/util/css-variables.ts
rename to components/_util/cssinjs/util/css-variables.ts
diff --git a/components/_util/_cssinjs/util/index.ts b/components/_util/cssinjs/util/index.ts
similarity index 100%
rename from components/_util/_cssinjs/util/index.ts
rename to components/_util/cssinjs/util/index.ts
diff --git a/components/button/style/compactCmp.ts b/components/button/style/compactCmp.ts
index 1fb4dd9ef7..c19b37f7b2 100644
--- a/components/button/style/compactCmp.ts
+++ b/components/button/style/compactCmp.ts
@@ -3,10 +3,10 @@ import type { ButtonToken } from './token';
import { prepareComponentToken, prepareToken } from './token';
import { genCompactItemStyle } from '../../style/compact-item';
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
-import type { GenerateStyle } from '../../_theme/internal';
-import { genSubStyleComponent } from '../../_theme/internal';
-import type { CSSObject } from '../../_util/_cssinjs';
-import { unit } from '../../_util/_cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import { genSubStyleComponent } from '../../theme/internal';
+import type { CSSObject } from '../../_util/cssinjs';
+import { unit } from '../../_util/cssinjs';
const genButtonCompactStyle: GenerateStyle<ButtonToken, CSSObject> = token => {
const { componentCls, calc } = token;
diff --git a/components/button/style/group.ts b/components/button/style/group.ts
index 82d036eca0..066d3d7119 100644
--- a/components/button/style/group.ts
+++ b/components/button/style/group.ts
@@ -1,6 +1,6 @@
-import type { CSSObject } from '../../_util/_cssinjs';
+import type { CSSObject } from '../../_util/cssinjs';
import type { ButtonToken } from './token';
-import type { GenerateStyle } from '../../_theme/internal';
+import type { GenerateStyle } from '../../theme/internal';
const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
// Border
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 84ebab32de..d2aa11c1bd 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -1,9 +1,9 @@
-import type { CSSObject } from '../../_util/_cssinjs';
-import { unit } from '../../_util/_cssinjs';
+import type { CSSObject } from '../../_util/cssinjs';
+import { unit } from '../../_util/cssinjs';
import { genFocusStyle } from '../../style';
-import type { GenerateStyle } from '../../_theme/internal';
-import { genStyleHooks, mergeToken } from '../../_theme/internal';
+import type { GenerateStyle } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
import genGroupStyle from './group';
import type { ButtonToken, ComponentToken } from './token';
import { prepareComponentToken, prepareToken } from './token';
diff --git a/components/button/style/token.ts b/components/button/style/token.ts
index ecf31a2f91..c075a55d5a 100644
--- a/components/button/style/token.ts
+++ b/components/button/style/token.ts
@@ -1,7 +1,7 @@
import type { CSSProperties } from 'vue';
-import type { FullToken, GetDefaultToken } from '../../_theme/internal';
-import { getLineHeight, mergeToken } from '../../_theme/internal';
-import type { GenStyleFn } from '../../_theme/util/genComponentStyleHook';
+import type { FullToken, GetDefaultToken } from '../../theme/internal';
+import { getLineHeight, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index ea81b74898..cf69fc73b9 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -5,9 +5,9 @@ import type { RequiredMark } from '../form/Form';
import type { RenderEmptyHandler } from './renderEmpty';
import type { TransformCellTextProps } from '../table/interface';
import type { Locale } from '../locale-provider';
-import type { DerivativeFunc } from '../_util/_cssinjs';
-import type { AliasToken, SeedToken } from '../_theme/internal';
-import type { MapToken, OverrideToken } from '../_theme/interface';
+import type { DerivativeFunc } from '../_util/cssinjs';
+import type { AliasToken, SeedToken } from '../theme/internal';
+import type { MapToken, OverrideToken } from '../theme/interface';
import type { VueNode } from '../_util/type';
import { objectType } from '../_util/type';
diff --git a/components/config-provider/hooks/useCssVarCls.ts b/components/config-provider/hooks/useCssVarCls.ts
index 8f2f779b01..b3e60fd8c1 100644
--- a/components/config-provider/hooks/useCssVarCls.ts
+++ b/components/config-provider/hooks/useCssVarCls.ts
@@ -1,4 +1,4 @@
-import { useToken } from '../../_theme/internal';
+import { useToken } from '../../theme/internal';
import type { Ref } from 'vue';
import { computed } from 'vue';
diff --git a/components/config-provider/hooks/useTheme.ts b/components/config-provider/hooks/useTheme.ts
index 6dbc28a14f..027a1a6941 100644
--- a/components/config-provider/hooks/useTheme.ts
+++ b/components/config-provider/hooks/useTheme.ts
@@ -1,5 +1,5 @@
import type { ThemeConfig } from '../context';
-import { defaultConfig } from '../../_theme/internal';
+import { defaultConfig } from '../../theme/internal';
import type { Ref } from 'vue';
import { computed } from 'vue';
import devWarning from '../../vc-util/warning';
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 2232601192..5167540fc8 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -14,7 +14,7 @@ import defaultLocale from '../locale/en_US';
import type { ValidateMessages } from '../form/interface';
import useStyle from './style';
import useTheme from './hooks/useTheme';
-import defaultSeedToken from '../_theme/themes/seed';
+import defaultSeedToken from '../theme/themes/seed';
import type { ConfigProviderInnerProps, ConfigProviderProps, Theme, ThemeConfig } from './context';
import {
useConfigContextProvider,
@@ -25,8 +25,8 @@ import {
} from './context';
import { useProviderSize } from './SizeContext';
import { useProviderDisabled } from './DisabledContext';
-import { createTheme } from '../_util/_cssinjs';
-import { defaultTheme, DesignTokenProvider } from '../_theme/context';
+import { createTheme } from '../_util/cssinjs';
+import { defaultTheme, DesignTokenProvider } from '../theme/context';
export type {
ConfigProviderProps,
diff --git a/components/config-provider/style/index.ts b/components/config-provider/style/index.ts
index 762e6e4950..c3533b2789 100644
--- a/components/config-provider/style/index.ts
+++ b/components/config-provider/style/index.ts
@@ -1,7 +1,7 @@
-import type { CSSObject } from '../../_util/_cssinjs';
-import { useStyleRegister } from '../../_util/_cssinjs';
+import type { CSSObject } from '../../_util/cssinjs';
+import { useStyleRegister } from '../../_util/cssinjs';
import { resetIcon } from '../../style';
-import { useToken } from '../../_theme/internal';
+import { useToken } from '../../theme/internal';
import { computed, Ref } from 'vue';
const useStyle = (iconPrefixCls: Ref<string>) => {
diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts
index d016f21e63..b7919cede2 100644
--- a/components/switch/style/index.ts
+++ b/components/switch/style/index.ts
@@ -1,9 +1,9 @@
-import type { CSSObject } from '../../_util/_cssinjs';
-import { unit } from '../../_util/_cssinjs';
+import type { CSSObject } from '../../_util/cssinjs';
+import { unit } from '../../_util/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import { genFocusStyle, resetComponent } from '../../style';
-import type { FullToken, GenerateStyle, GetDefaultToken } from '../../_theme/internal';
-import { genStyleHooks, mergeToken } from '../../_theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/**
diff --git a/components/theme/__tests__/util.test.js b/components/theme/__tests__/util.test.js
deleted file mode 100644
index 45741d15ba..0000000000
--- a/components/theme/__tests__/util.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import getAlphaColor from '../util/getAlphaColor';
-
-describe('util', () => {
- describe('getAlphaColor', () => {
- it('should not process color with alpha', () => {
- expect(getAlphaColor('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255)')).toBe('rgba(0, 0, 0, 0.5)');
- });
- });
-});
diff --git a/components/_theme/context.ts b/components/theme/context.ts
similarity index 96%
rename from components/_theme/context.ts
rename to components/theme/context.ts
index 8a86ed8fb3..a73e7f84c3 100644
--- a/components/_theme/context.ts
+++ b/components/theme/context.ts
@@ -9,8 +9,8 @@ import {
watch,
computed,
} from 'vue';
-import type { Theme } from '../_util/_cssinjs';
-import { createTheme } from '../_util/_cssinjs';
+import type { Theme } from '../_util/cssinjs';
+import { createTheme } from '../_util/cssinjs';
import { objectType, someType } from '../_util/type';
import type { AliasToken, MapToken, OverrideToken, SeedToken } from './interface';
diff --git a/components/theme/convertLegacyToken.ts b/components/theme/convertLegacyToken.ts
deleted file mode 100644
index 3995a1a0bd..0000000000
--- a/components/theme/convertLegacyToken.ts
+++ /dev/null
@@ -1,1107 +0,0 @@
-import type { MapToken } from './interface';
-import formatToken from './util/alias';
-
-export default function convertLegacyToken(mapToken: MapToken) {
- const token = formatToken(mapToken as any);
-
- const raw = {
- theme: 'default',
- 'ant-prefix': 'ant',
- 'html-selector': 'html',
-
- // -------- Colors -----------
- // >>> Primary
- 'primary-color': token.colorPrimary,
- 'primary-color-hover': token.colorPrimaryHover,
- 'primary-color-active': token.colorPrimaryActive,
- 'primary-color-outline': 'fade(@primary-color, @outline-fade)',
- 'processing-color': token.colorPrimary,
-
- // >>> Info
- 'info-color': token.colorInfo,
- 'info-color-deprecated-bg': token.colorInfoBg,
- 'info-color-deprecated-border': token.colorInfoBorder,
-
- // >>> Success
- 'success-color': token.colorSuccess,
- 'success-color-hover': token.colorSuccessBgHover,
- 'success-color-active': token.colorSuccessActive,
- 'success-color-outline': 'fade(@success-color, @outline-fade)',
- 'success-color-deprecated-bg': token.colorSuccessBg,
- 'success-color-deprecated-border': token.colorSuccessBorder,
-
- // >>> Warning
- 'warning-color': token.colorWarning,
- 'warning-color-hover': token.colorWarningHover,
- 'warning-color-active': token.colorWarningActive,
- 'warning-color-outline': 'fade(@warning-color, @outline-fade)',
- 'warning-color-deprecated-bg': token.colorWarningBg,
- 'warning-color-deprecated-border': token.colorWarningBorder,
-
- // >>> Error
- 'error-color': token.colorError,
- 'error-color-hover': token.colorErrorHover,
- 'error-color-active': token.colorErrorActive,
- 'error-color-outline': 'fade(@error-color, @outline-fade)',
- 'error-color-deprecated-bg': token.colorErrorBg,
- 'error-color-deprecated-border': token.colorErrorBorder,
-
- 'highlight-color': token.colorHighlight,
- 'normal-color': '#d9d9d9',
- white: token.colorWhite,
- black: '#000',
-
- // Color used by default to control hover and active backgrounds and for
- // alert info backgrounds.
- 'primary-1': token.colorPrimaryBg,
- 'primary-2': token.colorPrimaryBgHover,
- 'primary-3': token.colorPrimaryBorder,
- 'primary-4': token.colorPrimaryBorderHover,
- 'primary-5': token.colorPrimaryHover,
- 'primary-6': token.colorPrimary,
- 'primary-7': token.colorPrimaryActive,
- 'primary-8': token.colorPrimaryTextHover,
- 'primary-9': token.colorPrimaryText,
- 'primary-10': token.colorPrimaryTextActive,
-
- // Base Scaffolding Variables
- // ---
- // Background color for `<body>`
- 'body-background': token.colorBgBase,
-
- // Base background color for most components
- 'component-background': token.colorBgContainer,
-
- // Popover background color
- 'popover-background': token.colorBgElevated,
- 'popover-customize-border-color': token.colorSplit,
- 'font-family': token.fontFamily,
- 'code-family': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
- 'text-color': token.colorText,
- 'text-color-secondary': token.colorTextSecondary,
- 'text-color-inverse': token.colorWhite,
- 'icon-color': token.colorIcon,
- 'icon-color-hover': token.colorIconHover,
- 'heading-color': token.colorTextHeading,
- 'text-color-dark': 'fade(@white, 85%)',
- 'text-color-secondary-dark': 'fade(@white, 65%)',
- 'text-selection-bg': token.colorPrimary,
- 'font-variant-base': 'tabular-nums',
- 'font-feature-settings-base': 'tnum',
- 'font-size-base': token.fontSize,
- 'font-size-lg': token.fontSizeLG,
- 'font-size-sm': token.fontSizeSM,
- 'heading-1-size': token.fontSizeHeading1,
- 'heading-2-size': token.fontSizeHeading2,
- 'heading-3-size': token.fontSizeHeading3,
- 'heading-4-size': token.fontSizeHeading4,
- 'heading-5-size': token.fontSizeHeading5,
-
- // https://github.com/ant-design/ant-design/issues/20210
- 'line-height-base': token.lineHeight,
- 'border-radius-base': token.borderRadius,
- 'border-radius-sm': token.borderRadiusSM,
-
- // control border
- 'control-border-radius': token.borderRadius,
-
- // arrow border
- 'arrow-border-radius': token.borderRadiusSM, // 2px;
-
- // vertical paddings
- 'padding-lg': token.paddingLG,
- 'padding-md': token.padding,
- 'padding-sm': token.paddingSM,
- 'padding-xs': token.paddingXS,
- 'padding-xss': token.paddingXXS,
-
- // vertical padding for all form controls
- 'control-padding-horizontal': token.paddingSM, //@padding-sm;
- 'control-padding-horizontal-sm': token.paddingXS, // @padding-xs;
-
- // vertical margins
- 'margin-lg': token.marginLG,
- 'margin-md': token.margin,
- 'margin-sm': token.marginSM,
- 'margin-xs': token.marginXS,
- 'margin-xss': token.marginXXS,
-
- // height rules
- 'height-base': token.controlHeight,
- 'height-lg': token.controlHeightLG,
- 'height-sm': token.controlHeightSM,
-
- // The background colors for active and hover states for things like
- // list items or table cells.
- 'item-active-bg': token.controlItemBgActive,
- 'item-hover-bg': token.controlItemBgHover,
-
- // ICONFONT
- 'iconfont-css-prefix': 'anticon',
-
- // LINK
- 'link-color': token.colorLink,
- 'link-hover-color': token.colorLinkHover,
- 'link-active-color': token.colorLinkActive,
- 'link-decoration': 'none',
- 'link-hover-decoration': 'none',
- 'link-focus-decoration': 'none',
- 'link-focus-outline': 0,
-
- // Animation
- 'ease-base-out': token.motionEaseOut,
- 'ease-base-in': 'cubic-bezier(0.9, 0, 0.3, 0.7)',
- 'ease-out': token.motionEaseOut,
- 'ease-in': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
- 'ease-in-out': token.motionEaseInOut,
- 'ease-out-back': token.motionEaseOutBack,
- 'ease-in-back': 'cubic-bezier(0.71, -0.46, 0.88, 0.6)',
- 'ease-in-out-back': 'cubic-bezier(0.71, -0.46, 0.29, 1.46)',
- 'ease-out-circ': token.motionEaseOutCirc,
- 'ease-in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.34)',
- 'ease-in-out-circ': token.motionEaseInOutCirc,
- 'ease-out-quint': token.motionEaseOutQuint,
- 'ease-in-quint': token.motionEaseInQuint,
- 'ease-in-out-quint': 'cubic-bezier(0.86, 0, 0.07, 1)',
-
- // Border color
- 'border-color-base': token.colorBorder,
- 'border-color-split': token.colorSplit,
- 'border-color-inverse': token.colorWhite,
- 'border-width-base': token.lineWidth,
- 'border-style-base': 'solid',
-
- // Outline
- 'outline-blur-size': 0,
- 'outline-width': token.controlOutlineWidth,
- 'outline-color': token.controlOutline,
- 'outline-fade': '20%',
- 'background-color-light': 'hsv(0, 0, 98%)', // background of header and selected item
- 'background-color-base': 'hsv(0, 0, 96%)', // Default grey background color
-
- // Disabled states
- 'disabled-color': token.colorTextDisabled,
- 'disabled-bg': token.colorBgContainerDisabled,
- 'disabled-active-bg': token.colorBgContainerDisabled, // tint(@black, 90%);
- 'disabled-color-dark': 'fade(#fff, 35%)',
-
- // Shadow
- 'shadow-color': 'rgba(0, 0, 0, 0.15)',
- 'shadow-color-inverse': token.colorBgContainer,
- 'box-shadow-base': token.boxShadow,
- 'shadow-1-up': token.boxShadowDrawerUp,
- 'shadow-1-down': token.boxShadowDrawerDown,
- 'shadow-1-left': token.boxShadowDrawerLeft,
- 'shadow-1-right': token.boxShadowDrawerRight,
- 'shadow-2': token.boxShadowSecondary,
-
- // ==========================================================================
- // == Components ==
- // ==========================================================================
- // Buttons
- 'btn-font-weight': '400',
- 'btn-border-radius-base': '@border-radius-base',
- 'btn-border-radius-sm': '@border-radius-base',
- 'btn-border-width': '@border-width-base',
- 'btn-border-style': '@border-style-base',
- 'btn-shadow': '0 2px 0 rgba(0, 0, 0, 0.015)',
- 'btn-primary-shadow': '0 2px 0 rgba(0, 0, 0, 0.045)',
- 'btn-text-shadow': '0 -1px 0 rgba(0, 0, 0, 0.12)',
-
- 'btn-primary-color': '#fff',
- 'btn-primary-bg': '@primary-color',
-
- 'btn-default-color': '@text-color',
- 'btn-default-bg': '@component-background',
- 'btn-default-border': '@border-color-base',
-
- 'btn-danger-color': '#fff',
- 'btn-danger-bg': '@error-color',
- 'btn-danger-border': '@error-color',
-
- 'btn-disable-color': '@disabled-color',
- 'btn-disable-bg': '@disabled-bg',
- 'btn-disable-border': '@border-color-base',
-
- 'btn-default-ghost-color': '@component-background',
- 'btn-default-ghost-bg': 'transparent',
- 'btn-default-ghost-border': '@component-background',
-
- 'btn-font-size-lg': '@font-size-lg',
- 'btn-font-size-sm': '@font-size-base',
- 'btn-padding-horizontal-base': '@padding-md - 1px',
- 'btn-padding-horizontal-lg': '@btn-padding-horizontal-base',
- 'btn-padding-horizontal-sm': '@padding-xs - 1px',
-
- 'btn-height-base': '@height-base',
- 'btn-height-lg': '@height-lg',
- 'btn-height-sm': '@height-sm',
-
- 'btn-line-height': '@line-height-base',
-
- 'btn-circle-size': '@btn-height-base',
- 'btn-circle-size-lg': '@btn-height-lg',
- 'btn-circle-size-sm': '@btn-height-sm',
-
- 'btn-square-size': '@btn-height-base',
- 'btn-square-size-lg': '@btn-height-lg',
- 'btn-square-size-sm': '@btn-height-sm',
- 'btn-square-only-icon-size': '@font-size-base + 2px',
- 'btn-square-only-icon-size-sm': '@font-size-base',
- 'btn-square-only-icon-size-lg': '@btn-font-size-lg + 2px',
-
- 'btn-group-border': '@primary-5',
-
- 'btn-link-hover-bg': 'transparent',
- 'btn-text-hover-bg': 'rgba(0, 0, 0, 0.018)',
-
- // Checkbox
- 'checkbox-size': '16px',
- 'checkbox-color': '@primary-color',
- 'checkbox-check-color': '#fff',
- 'checkbox-check-bg': '@checkbox-check-color',
- 'checkbox-border-width': '@border-width-base',
- 'checkbox-border-radius': '@border-radius-base',
- 'checkbox-group-item-margin-right': '8px',
-
- // Descriptions
- 'descriptions-bg': '#fafafa',
- 'descriptions-title-margin-bottom': '20px',
- 'descriptions-default-padding': '@padding-md @padding-lg',
- 'descriptions-middle-padding': '@padding-sm @padding-lg',
- 'descriptions-small-padding': '@padding-xs @padding-md',
- 'descriptions-item-padding-bottom': '@padding-md',
- 'descriptions-item-trailing-colon': 'true',
- 'descriptions-item-label-colon-margin-right': '8px',
- 'descriptions-item-label-colon-margin-left': '2px',
- 'descriptions-extra-color': '@text-color',
-
- // Divider
- 'divider-text-padding': '1em',
- 'divider-orientation-margin': '5%',
- 'divider-color': 'rgba(0, 0, 0, 6%)',
- 'divider-vertical-gutter': '8px',
-
- // Dropdown
- 'dropdown-selected-color': '@primary-color',
- 'dropdown-menu-submenu-disabled-bg': '@component-background',
- 'dropdown-selected-bg': '@item-active-bg',
-
- // Empty
- 'empty-font-size': '@font-size-base',
-
- // Radio
- 'radio-size': '16px',
- 'radio-top': '0.2em',
- 'radio-border-width': '1px',
- 'radio-dot-size': '@radio-size - 8px',
- 'radio-dot-color': '@primary-color',
- 'radio-dot-disabled-color': 'fade(@black, 20%)',
- 'radio-solid-checked-color': '@component-background',
-
- // Radio buttons
- 'radio-button-bg': '@btn-default-bg',
- 'radio-button-checked-bg': '@btn-default-bg',
- 'radio-button-color': '@btn-default-color',
- 'radio-button-hover-color': '@primary-5',
- 'radio-button-active-color': '@primary-7',
- 'radio-button-padding-horizontal': '@padding-md - 1px',
- 'radio-disabled-button-checked-bg': '@disabled-active-bg',
- 'radio-disabled-button-checked-color': '@disabled-color',
- 'radio-wrapper-margin-right': '8px',
-
- // Media queries breakpoints
- // @screen-xs and @screen-xs-min is not used in Grid
- // smallest break point is @screen-md
- 'screen-xs': '480px',
- 'screen-xs-min': '@screen-xs',
- // 👆 Extra small screen / phone
-
- // 👇 Small screen / tablet
- 'screen-sm': '576px',
- 'screen-sm-min': '@screen-sm',
-
- // Medium screen / desktop
- 'screen-md': '768px',
- 'screen-md-min': '@screen-md',
-
- // Large screen / wide desktop
- 'screen-lg': '992px',
- 'screen-lg-min': '@screen-lg',
-
- // Extra large screen / full hd
- 'screen-xl': '1200px',
- 'screen-xl-min': '@screen-xl',
-
- // Extra extra large screen / large desktop
- 'screen-xxl': '1600px',
- 'screen-xxl-min': '@screen-xxl',
-
- // provide a maximum
- 'screen-xs-max': '(@screen-sm-min - 1px)',
- 'screen-sm-max': '(@screen-md-min - 1px)',
- 'screen-md-max': '(@screen-lg-min - 1px)',
- 'screen-lg-max': '(@screen-xl-min - 1px)',
- 'screen-xl-max': '(@screen-xxl-min - 1px)',
-
- // Grid system
- 'grid-columns': '24',
-
- // Layout
- 'layout-body-background': '#f0f2f5',
- 'layout-header-background': '#001529',
- 'layout-header-height': '64px',
- 'layout-header-padding': '0 50px',
- 'layout-header-color': '@text-color',
- 'layout-footer-padding': '24px 50px',
- 'layout-footer-background': '@layout-body-background',
- 'layout-sider-background': '@layout-header-background',
- 'layout-trigger-height': '48px',
- 'layout-trigger-background': '#002140',
- 'layout-trigger-color': '#fff',
- 'layout-zero-trigger-width': '36px',
- 'layout-zero-trigger-height': '42px',
- // Layout light theme
- 'layout-sider-background-light': '#fff',
- 'layout-trigger-background-light': '#fff',
- 'layout-trigger-color-light': '@text-color',
-
- // z-index list, order by `z-index`
- 'zindex-badge': 'auto',
- 'zindex-table-fixed': '2',
- 'zindex-affix': '10',
- 'zindex-back-top': '10',
- 'zindex-picker-panel': '10',
- 'zindex-popup-close': '10',
- 'zindex-modal': '1000',
- 'zindex-modal-mask': '1000',
- 'zindex-message': '1010',
- 'zindex-notification': '1010',
- 'zindex-popover': '1030',
- 'zindex-dropdown': '1050',
- 'zindex-picker': '1050',
- 'zindex-popoconfirm': '1060',
- 'zindex-tooltip': '1070',
- 'zindex-image': '1080',
-
- // Animation
- 'animation-duration-slow': '0.3s', // Modal
- 'animation-duration-base': '0.2s',
- 'animation-duration-fast': '0.1s', // Tooltip
-
- //CollapsePanel
- 'collapse-panel-border-radius': '@border-radius-base',
-
- //Dropdown
- 'dropdown-menu-bg': '@component-background',
- 'dropdown-vertical-padding': '5px',
- 'dropdown-edge-child-vertical-padding': '4px',
- 'dropdown-font-size': '@font-size-base',
- 'dropdown-line-height': '22px',
-
- // Form
- // ---
- 'label-required-color': '@highlight-color',
- 'label-color': '@heading-color',
- 'form-warning-input-bg': '@input-bg',
- 'form-item-margin-bottom': '24px',
- 'form-item-trailing-colon': 'true',
- 'form-vertical-label-padding': '0 0 8px',
- 'form-vertical-label-margin': '0',
- 'form-item-label-font-size': '@font-size-base',
- 'form-item-label-height': '@input-height-base',
- 'form-item-label-colon-margin-right': '8px',
- 'form-item-label-colon-margin-left': '2px',
- 'form-error-input-bg': '@input-bg',
-
- // Input
- // ---
- 'input-height-base': '@height-base',
- 'input-height-lg': '@height-lg',
- 'input-height-sm': '@height-sm',
- 'input-padding-horizontal': '@control-padding-horizontal - 1px',
- 'input-padding-horizontal-base': '@input-padding-horizontal',
- 'input-padding-horizontal-sm': '@control-padding-horizontal-sm - 1px',
- 'input-padding-horizontal-lg': '@input-padding-horizontal',
- 'input-padding-vertical-base': `max(
- (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
- @border-width-base,
- 3px
-)`,
- 'input-padding-vertical-sm': `max(
- (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
- @border-width-base,
- 0
-)`,
- 'input-padding-vertical-lg': `(
- ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10
- ) - @border-width-base`,
- 'input-placeholder-color': 'hsv(0, 0, 75%)',
- 'input-color': '@text-color',
- 'input-icon-color': '@input-color',
- 'input-border-color': '@border-color-base',
- 'input-bg': '@component-background',
- 'input-number-hover-border-color': '@input-hover-border-color',
- 'input-number-handler-active-bg': '#f4f4f4',
- 'input-number-handler-hover-bg': '@primary-5',
- 'input-number-handler-bg': '@component-background',
- 'input-number-handler-border-color': '@border-color-base',
- 'input-addon-bg': '@background-color-light',
- 'input-hover-border-color': '@primary-5',
- 'input-disabled-bg': '@disabled-bg',
- 'input-outline-offset': '0 0',
- 'input-icon-hover-color': 'fade(@black, 85%)',
- 'input-disabled-color': '@disabled-color',
-
- // Mentions
- // ---
- 'mentions-dropdown-bg': '@component-background',
- 'mentions-dropdown-menu-item-hover-bg': '@mentions-dropdown-bg',
-
- // Select
- // ---
- 'select-border-color': '@border-color-base',
- 'select-item-selected-color': '@text-color',
- 'select-item-selected-font-weight': '600',
- 'select-dropdown-bg': '@component-background',
- 'select-item-selected-bg': '@primary-1',
- 'select-item-active-bg': '@item-hover-bg',
- 'select-dropdown-vertical-padding': '@dropdown-vertical-padding',
- 'select-dropdown-font-size': '@dropdown-font-size',
- 'select-dropdown-line-height': '@dropdown-line-height',
- 'select-dropdown-height': '32px',
- 'select-background': '@component-background',
- 'select-clear-background': '@select-background',
- 'select-selection-item-bg': '@background-color-base',
- 'select-selection-item-border-color': '@border-color-split',
- 'select-single-item-height-lg': '40px',
- 'select-multiple-item-height': '@input-height-base - @input-padding-vertical-base * 2', // Normal 24px
- 'select-multiple-item-height-lg': '32px',
- 'select-multiple-item-spacing-half': 'ceil((@input-padding-vertical-base / 2))',
- 'select-multiple-disabled-background': '@input-disabled-bg',
- 'select-multiple-item-disabled-color': '#bfbfbf',
- 'select-multiple-item-disabled-border-color': '@select-border-color',
-
- // Cascader
- // ---
- 'cascader-bg': '@component-background',
- 'cascader-item-selected-bg': '@primary-1',
- 'cascader-menu-bg': '@component-background',
- 'cascader-menu-border-color-split': '@border-color-split',
-
- // Cascader
- // ----
- 'cascader-dropdown-vertical-padding': '@dropdown-vertical-padding',
- 'cascader-dropdown-edge-child-vertical-padding': '@dropdown-edge-child-vertical-padding',
- 'cascader-dropdown-font-size': '@dropdown-font-size',
- 'cascader-dropdown-line-height': '@dropdown-line-height',
-
- // Anchor
- // ---
- 'anchor-bg': 'transparent',
- 'anchor-border-color': '@border-color-split',
- 'anchor-link-top': '4px',
- 'anchor-link-left': '16px',
- 'anchor-link-padding': '@anchor-link-top 0 @anchor-link-top @anchor-link-left',
-
- // Tooltip
- // ---
- // Tooltip max width
- 'tooltip-max-width': '250px',
- // Tooltip text color
- 'tooltip-color': '#fff',
- // Tooltip background color
- 'tooltip-bg': 'rgba(0, 0, 0, 0.75)',
- // Tooltip arrow width
- 'tooltip-arrow-width': '8px * sqrt(2)',
- // Tooltip distance with trigger
- 'tooltip-distance': '@tooltip-arrow-width - 1px + 4px',
- // Tooltip arrow color
- 'tooltip-arrow-color': '@tooltip-bg',
- 'tooltip-border-radius': '@border-radius-base',
-
- // Popover
- // ---
- // Popover body background color
- 'popover-bg': '@component-background',
- // Popover text color
- 'popover-color': '@text-color',
- // Popover maximum width
- 'popover-min-width': '177px',
- 'popover-min-height': '32px',
- // Popover arrow width
- 'popover-arrow-width': '@tooltip-arrow-width',
- // Popover arrow color
- 'popover-arrow-color': '@popover-bg',
- // Popover outer arrow width
- // Popover outer arrow color
- 'popover-arrow-outer-color': '@popover-bg',
- // Popover distance with trigger
- 'popover-distance': '@popover-arrow-width + 4px',
- 'popover-padding-horizontal': '@padding-md',
-
- // Modal
- // --
- 'modal-header-padding-vertical': '@padding-md',
- 'modal-header-padding-horizontal': '@padding-lg',
- 'modal-body-padding': '@padding-lg',
- 'modal-header-bg': '@component-background',
- 'modal-header-padding': '@modal-header-padding-vertical @modal-header-padding-horizontal',
- 'modal-header-border-width': '@border-width-base',
- 'modal-header-border-style': '@border-style-base',
- 'modal-header-title-line-height': '22px',
- 'modal-header-title-font-size': '@font-size-lg',
- 'modal-header-border-color-split': '@border-color-split',
- 'modal-header-close-size':
- '@modal-header-title-line-height + 2 * @modal-header-padding-vertical',
- 'modal-content-bg': '@component-background',
- 'modal-heading-color': '@heading-color',
- 'modal-close-color': '@text-color-secondary',
- 'modal-footer-bg': 'transparent',
- 'modal-footer-border-color-split': '@border-color-split',
- 'modal-footer-border-style': '@border-style-base',
- 'modal-footer-padding-vertical': '10px',
- 'modal-footer-padding-horizontal': '16px',
- 'modal-footer-border-width': '@border-width-base',
- 'modal-mask-bg': 'fade(@black, 45%)',
- 'modal-confirm-body-padding': '32px 32px 24px',
- 'modal-confirm-title-font-size': '@font-size-lg',
- 'modal-border-radius': '@border-radius-base',
-
- // Progress
- // --
- 'progress-default-color': '@processing-color',
- 'progress-remaining-color': '@background-color-base',
- 'progress-info-text-color': '@progress-text-color',
- 'progress-radius': '100px',
- 'progress-steps-item-bg': '#f3f3f3',
- 'progress-text-font-size': '1em',
- 'progress-text-color': '@text-color', // This is for circle text color, should be renamed better
- 'progress-circle-text-font-size': '1em',
- // Menu
- // ---
- 'menu-inline-toplevel-item-height': '40px',
- 'menu-item-height': '40px',
- 'menu-item-group-height': '@line-height-base',
- 'menu-collapsed-width': '80px',
- 'menu-bg': '@component-background',
- 'menu-popup-bg': '@component-background',
- 'menu-item-color': '@text-color',
- 'menu-inline-submenu-bg': '@background-color-light',
- 'menu-highlight-color': '@primary-color',
- 'menu-highlight-danger-color': '@error-color',
- 'menu-item-active-bg': '@primary-1',
- 'menu-item-active-danger-bg': '@red-1',
- 'menu-item-active-border-width': '3px',
- 'menu-item-group-title-color': '@text-color-secondary',
- 'menu-item-vertical-margin': '4px',
- 'menu-item-font-size': '@font-size-base',
- 'menu-item-boundary-margin': '8px',
- 'menu-item-padding-horizontal': '20px',
- 'menu-item-padding': '0 @menu-item-padding-horizontal',
- 'menu-horizontal-line-height': '46px',
- 'menu-icon-margin-right': '10px',
- 'menu-icon-size': '@menu-item-font-size',
- 'menu-icon-size-lg': '@font-size-lg',
- 'menu-item-group-title-font-size': '@menu-item-font-size',
-
- // dark theme
- 'menu-dark-color': '@text-color-secondary-dark',
- 'menu-dark-danger-color': '@error-color',
- 'menu-dark-bg': '@layout-header-background',
- 'menu-dark-arrow-color': '#fff',
- 'menu-dark-inline-submenu-bg': '#000c17',
- 'menu-dark-highlight-color': '#fff',
- 'menu-dark-item-active-bg': '@primary-color',
- 'menu-dark-item-active-danger-bg': '@error-color',
- 'menu-dark-selected-item-icon-color': '@white',
- 'menu-dark-selected-item-text-color': '@white',
- 'menu-dark-item-hover-bg': 'transparent',
- // Spin
- // ---
- 'spin-dot-size-sm': '14px',
- 'spin-dot-size': '20px',
- 'spin-dot-size-lg': '32px',
-
- // Table
- // --
- 'table-bg': '@component-background',
- 'table-header-bg': '@background-color-light',
- 'table-header-color': '@heading-color',
- 'table-header-sort-bg': '@background-color-base',
- 'table-body-sort-bg': '#fafafa',
- 'table-row-hover-bg': '@background-color-light',
- 'table-selected-row-color': 'inherit',
- 'table-selected-row-bg': '@primary-1',
- 'table-body-selected-sort-bg': '@table-selected-row-bg',
- 'table-selected-row-hover-bg': 'darken(@table-selected-row-bg, 2%)',
- 'table-expanded-row-bg': '#fbfbfb',
- 'table-padding-vertical': '16px',
- 'table-padding-horizontal': '16px',
- 'table-padding-vertical-md': '(@table-padding-vertical * 3 / 4)',
- 'table-padding-horizontal-md': '(@table-padding-horizontal / 2)',
- 'table-padding-vertical-sm': '(@table-padding-vertical / 2)',
- 'table-padding-horizontal-sm': '(@table-padding-horizontal / 2)',
- 'table-border-color': '@border-color-split',
- 'table-border-radius-base': '@border-radius-base',
- 'table-footer-bg': '@background-color-light',
- 'table-footer-color': '@heading-color',
- 'table-header-bg-sm': '@table-header-bg',
- 'table-font-size': '@font-size-base',
- 'table-font-size-md': '@table-font-size',
- 'table-font-size-sm': '@table-font-size',
- 'table-header-cell-split-color': 'rgba(0, 0, 0, 0.06)',
- // Sorter
- // Legacy: `table-header-sort-active-bg` is used for hover not real active
- 'table-header-sort-active-bg': 'rgba(0, 0, 0, 0.04)',
- 'table-fixed-header-sort-active-bg': 'hsv(0, 0, 96%)',
-
- // Filter
- 'table-header-filter-active-bg': 'rgba(0, 0, 0, 0.04)',
- 'table-filter-btns-bg': 'inherit',
- 'table-filter-dropdown-bg': '@component-background',
- 'table-expand-icon-bg': '@component-background',
- 'table-selection-column-width': '32px',
- // Sticky
- 'table-sticky-scroll-bar-bg': 'fade(#000, 35%)',
- 'table-sticky-scroll-bar-radius': '4px',
-
- // Tag
- // --
- 'tag-border-radius': '@border-radius-base',
- 'tag-default-bg': '@background-color-light',
- 'tag-default-color': '@text-color',
- 'tag-font-size': '@font-size-sm',
- 'tag-line-height': '20px',
-
- // TimePicker
- // ---
- 'picker-bg': '@component-background',
- 'picker-basic-cell-hover-color': '@item-hover-bg',
- 'picker-basic-cell-active-with-range-color': '@primary-1',
- 'picker-basic-cell-hover-with-range-color': 'lighten(@primary-color, 35%)',
- 'picker-basic-cell-disabled-bg': 'rgba(0, 0, 0, 0.04)',
- 'picker-border-color': '@border-color-split',
- 'picker-date-hover-range-border-color': 'lighten(@primary-color, 20%)',
- 'picker-date-hover-range-color': '@picker-basic-cell-hover-with-range-color',
- 'picker-time-panel-column-width': '56px',
- 'picker-time-panel-column-height': '224px',
- 'picker-time-panel-cell-height': '28px',
- 'picker-panel-cell-height': '24px',
- 'picker-panel-cell-width': '36px',
- 'picker-text-height': '40px',
- 'picker-panel-without-time-cell-height': '66px',
-
- // Calendar
- // ---
- 'calendar-bg': '@component-background',
- 'calendar-input-bg': '@input-bg',
- 'calendar-border-color': '@border-color-inverse',
- 'calendar-item-active-bg': '@item-active-bg',
- 'calendar-column-active-bg': 'fade(@calendar-item-active-bg, 20%)',
- 'calendar-full-bg': '@calendar-bg',
- 'calendar-full-panel-bg': '@calendar-full-bg',
-
- // Carousel
- // ---
- 'carousel-dot-width': '16px',
- 'carousel-dot-height': '3px',
- 'carousel-dot-active-width': '24px',
-
- // Badge
- // ---
- 'badge-height': '20px',
- 'badge-height-sm': '14px',
- 'badge-dot-size': '6px',
- 'badge-font-size': '@font-size-sm',
- 'badge-font-size-sm': '@font-size-sm',
- 'badge-font-weight': 'normal',
- 'badge-status-size': '6px',
- 'badge-text-color': '@component-background',
- 'badge-color': '@highlight-color',
-
- // Rate
- // ---
- 'rate-star-color': '@yellow-6',
- 'rate-star-bg': '@border-color-split',
- 'rate-star-size': '20px',
- 'rate-star-hover-scale': 'scale(1.1)',
-
- // Card
- // ---
- 'card-head-color': '@heading-color',
- 'card-head-background': 'transparent',
- 'card-head-font-size': '@font-size-lg',
- 'card-head-font-size-sm': '@font-size-base',
- 'card-head-padding': '16px',
- 'card-head-padding-sm': '(@card-head-padding / 2)',
- 'card-head-height': '48px',
- 'card-head-height-sm': '36px',
- 'card-inner-head-padding': '12px',
- 'card-padding-base': '24px',
- 'card-padding-base-sm': '(@card-padding-base / 2)',
- 'card-actions-background': '@component-background',
- 'card-actions-li-margin': '12px 0',
- 'card-skeleton-bg': '#cfd8dc',
- 'card-background': '@component-background',
- 'card-shadow': `0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
- 0 5px 12px 4px rgba(0, 0, 0, 0.09)`,
- 'card-radius': '@border-radius-base',
- 'card-head-tabs-margin-bottom': '-17px',
- 'card-head-extra-color': '@text-color',
-
- // Comment
- // ---
- 'comment-bg': 'inherit',
- 'comment-padding-base': '@padding-md 0',
- 'comment-nest-indent': '44px',
- 'comment-font-size-base': '@font-size-base',
- 'comment-font-size-sm': '@font-size-sm',
- 'comment-author-name-color': '@text-color-secondary',
- 'comment-author-time-color': '#ccc',
- 'comment-action-color': '@text-color-secondary',
- 'comment-action-hover-color': '#595959',
- 'comment-actions-margin-bottom': 'inherit',
- 'comment-actions-margin-top': '@margin-sm',
- 'comment-content-detail-p-margin-bottom': 'inherit',
-
- // Tabs
- // ---
- 'tabs-card-head-background': '@background-color-light',
- 'tabs-card-height': '40px',
- 'tabs-card-active-color': '@primary-color',
- 'tabs-card-horizontal-padding': `(
- (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2
- ) - @border-width-base @padding-md`,
- 'tabs-card-horizontal-padding-sm': '6px @padding-md',
- 'tabs-card-horizontal-padding-lg': '7px @padding-md 6px',
- 'tabs-title-font-size': '@font-size-base',
- 'tabs-title-font-size-lg': '@font-size-lg',
- 'tabs-title-font-size-sm': '@font-size-base',
- 'tabs-ink-bar-color': '@primary-color',
- 'tabs-bar-margin': '0 0 @margin-md 0',
- 'tabs-horizontal-gutter': '32px',
- 'tabs-horizontal-margin': '0 0 0 @tabs-horizontal-gutter',
- 'tabs-horizontal-margin-rtl': '0 0 0 32px',
- 'tabs-horizontal-padding': '@padding-sm 0',
- 'tabs-horizontal-padding-lg': '@padding-md 0',
- 'tabs-horizontal-padding-sm': '@padding-xs 0',
- 'tabs-vertical-padding': '@padding-xs @padding-lg',
- 'tabs-vertical-margin': '@margin-md 0 0 0',
- 'tabs-scrolling-size': '32px',
- 'tabs-highlight-color': '@primary-color',
- 'tabs-hover-color': '@primary-5',
- 'tabs-active-color': '@primary-7',
- 'tabs-card-gutter': '2px',
- 'tabs-card-tab-active-border-top': '2px solid transparent',
-
- // BackTop
- // ---
- 'back-top-color': '#fff',
- 'back-top-bg': '@text-color-secondary',
- 'back-top-hover-bg': '@text-color',
-
- // Avatar
- // ---
- 'avatar-size-base': '32px',
- 'avatar-size-lg': '40px',
- 'avatar-size-sm': '24px',
- 'avatar-font-size-base': '18px',
- 'avatar-font-size-lg': '24px',
- 'avatar-font-size-sm': '14px',
- 'avatar-bg': '#ccc',
- 'avatar-color': '#fff',
- 'avatar-border-radius': '@border-radius-base',
- 'avatar-group-overlapping': '-8px',
- 'avatar-group-space': '3px',
- 'avatar-group-border-color': '#fff',
-
- // Switch
- // ---
- 'switch-height': '22px',
- 'switch-sm-height': '16px',
- 'switch-min-width': '44px',
- 'switch-sm-min-width': '28px',
- 'switch-disabled-opacity': '0.4',
- 'switch-color': '@primary-color',
- 'switch-bg': '@component-background',
- 'switch-shadow-color': 'fade(#00230b, 20%)',
- 'switch-padding': '2px',
- 'switch-inner-margin-min': 'ceil(@switch-height * 0.3)',
- 'switch-inner-margin-max': 'ceil(@switch-height * 1.1)',
- 'switch-sm-inner-margin-min': 'ceil(@switch-sm-height * 0.3)',
- 'switch-sm-inner-margin-max': 'ceil(@switch-sm-height * 1.1)',
-
- // Pagination
- // ---
- 'pagination-item-bg': '@component-background',
- 'pagination-item-size': '@height-base',
- 'pagination-item-size-sm': '24px',
- 'pagination-font-family': '@font-family',
- 'pagination-font-weight-active': '500',
- 'pagination-item-bg-active': '@component-background',
- 'pagination-item-link-bg': '@component-background',
- 'pagination-item-disabled-color-active': '@disabled-color',
- 'pagination-item-disabled-bg-active': '@disabled-active-bg',
- 'pagination-item-input-bg': '@component-background',
- 'pagination-mini-options-size-changer-top': '0px',
-
- // PageHeader
- // ---
- 'page-header-padding': '@padding-lg',
- 'page-header-padding-vertical': '@padding-md',
- 'page-header-padding-breadcrumb': '@padding-sm',
- 'page-header-content-padding-vertical': '@padding-sm',
- 'page-header-back-color': '#000',
- 'page-header-ghost-bg': 'inherit',
- 'page-header-heading-title': '@heading-4-size',
- 'page-header-heading-sub-title': '14px',
- 'page-header-tabs-tab-font-size': '16px',
-
- // Breadcrumb
- // ---
- 'breadcrumb-base-color': '@text-color-secondary',
- 'breadcrumb-last-item-color': '@text-color',
- 'breadcrumb-font-size': '@font-size-base',
- 'breadcrumb-icon-font-size': '@font-size-base',
- 'breadcrumb-link-color': '@text-color-secondary',
- 'breadcrumb-link-color-hover': '@text-color',
- 'breadcrumb-separator-color': '@text-color-secondary',
- 'breadcrumb-separator-margin': '0 @padding-xs',
-
- // Slider
- // ---
- 'slider-margin': '10px 6px 10px',
- 'slider-rail-background-color': '@background-color-base',
- 'slider-rail-background-color-hover': '#e1e1e1',
- 'slider-track-background-color': '@primary-3',
- 'slider-track-background-color-hover': '@primary-4',
- 'slider-handle-border-width': '2px',
- 'slider-handle-background-color': '@component-background',
- 'slider-handle-color': '@primary-3',
- 'slider-handle-color-hover': '@primary-4',
- 'slider-handle-color-focus': 'tint(@primary-color, 20%)',
- 'slider-handle-color-focus-shadow': 'fade(@primary-color, 12%)',
- 'slider-handle-color-tooltip-open': '@primary-color',
- 'slider-handle-size': '14px',
- 'slider-handle-margin-top': '-5px',
- 'slider-handle-margin-left': '-5px',
- 'slider-handle-shadow': '0',
- 'slider-dot-border-color': '@border-color-split',
- 'slider-dot-border-color-active': 'tint(@primary-color, 50%)',
- 'slider-disabled-color': '@disabled-color',
- 'slider-disabled-background-color': '@component-background',
-
- // Tree
- // ---
- 'tree-bg': '@component-background',
- 'tree-title-height': '24px',
- 'tree-child-padding': '18px',
- 'tree-directory-selected-color': '#fff',
- 'tree-directory-selected-bg': '@primary-color',
- 'tree-node-hover-bg': '@item-hover-bg',
- 'tree-node-selected-bg': '@primary-2',
-
- // Collapse
- // ---
- 'collapse-header-padding': '@padding-sm @padding-md',
- 'collapse-header-padding-extra': '40px',
- 'collapse-header-bg': '@background-color-light',
- 'collapse-content-padding': '@padding-md',
- 'collapse-content-bg': '@component-background',
- 'collapse-header-arrow-left': '16px',
-
- // Skeleton
- // ---
- 'skeleton-color': 'rgba(190, 190, 190, 0.2)',
- 'skeleton-to-color': 'shade(@skeleton-color, 5%)',
- 'skeleton-paragraph-margin-top': '28px',
- 'skeleton-paragraph-li-margin-top': '@margin-md',
- 'skeleton-paragraph-li-height': '16px',
- 'skeleton-title-height': '16px',
- 'skeleton-title-paragraph-margin-top': '@margin-lg',
-
- // Transfer
- // ---
- 'transfer-header-height': '40px',
- 'transfer-item-height': '@height-base',
- 'transfer-disabled-bg': '@disabled-bg',
- 'transfer-list-height': '200px',
- 'transfer-item-hover-bg': '@item-hover-bg',
- 'transfer-item-selected-hover-bg': 'darken(@item-active-bg, 2%)',
- 'transfer-item-padding-vertical': '6px',
- 'transfer-list-search-icon-top': '12px',
-
- // Message
- // ---
- 'message-notice-content-padding': '10px 16px',
- 'message-notice-content-bg': '@component-background',
- // Motion
- // ---
- 'wave-animation-width': '6px',
-
- // Alert
- // ---
- 'alert-success-border-color': token.colorSuccessBorder,
- 'alert-success-bg-color': token.colorSuccessBg,
- 'alert-success-icon-color': token.colorSuccess,
- 'alert-info-border-color': token.colorInfoBorder,
- 'alert-info-bg-color': token.colorInfoBg,
- 'alert-info-icon-color': token.colorInfo,
- 'alert-warning-border-color': token.colorWarningBorder,
- 'alert-warning-bg-color': token.colorWarningBg,
- 'alert-warning-icon-color': token.colorWarning,
- 'alert-error-border-color': token.colorErrorBorder,
- 'alert-error-bg-color': token.colorErrorBg,
- 'alert-error-icon-color': '@error-color',
- 'alert-message-color': '@heading-color',
- 'alert-text-color': '@text-color',
- 'alert-close-color': '@text-color-secondary',
- 'alert-close-hover-color': '@icon-color-hover',
- 'alert-padding-vertical': '@padding-xs',
- 'alert-padding-horizontal': '@padding-md - 1px',
- 'alert-no-icon-padding-vertical': '@padding-xs',
- 'alert-with-description-no-icon-padding-vertical': '@padding-md - 1px',
- 'alert-with-description-padding-vertical': '@padding-md - 1px',
- 'alert-with-description-padding': `@alert-with-description-padding-vertical 15px
- @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size`,
- 'alert-icon-top': '8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2)',
- 'alert-with-description-icon-size': '24px',
-
- // List
- // ---
- 'list-header-background': 'transparent',
- 'list-footer-background': 'transparent',
- 'list-empty-text-padding': '@padding-md',
- 'list-item-padding': '@padding-sm 0',
- 'list-item-padding-sm': '@padding-xs @padding-md',
- 'list-item-padding-lg': '16px 24px',
- 'list-item-meta-margin-bottom': '@padding-md',
- 'list-item-meta-avatar-margin-right': '@padding-md',
- 'list-item-meta-title-margin-bottom': '@padding-sm',
- 'list-customize-card-bg': '@component-background',
- 'list-item-meta-description-font-size': '@font-size-base',
-
- // Statistic
- // ---
- 'statistic-title-font-size': '@font-size-base',
- 'statistic-content-font-size': '24px',
- 'statistic-unit-font-size': '24px',
- 'statistic-font-family': '@font-family',
-
- // Drawer
- // ---
- 'drawer-header-padding': '@padding-md @padding-lg',
- 'drawer-body-padding': '@padding-lg',
- 'drawer-bg': '@component-background',
- 'drawer-footer-padding-vertical': '@modal-footer-padding-vertical',
- 'drawer-footer-padding-horizontal': '@modal-footer-padding-horizontal',
- 'drawer-header-close-size': '56px',
- 'drawer-title-font-size': '@font-size-lg',
- 'drawer-title-line-height': '22px',
-
- // Timeline
- // ---
- 'timeline-width': '2px',
- 'timeline-color': '@border-color-split',
- 'timeline-dot-border-width': '2px',
- 'timeline-dot-color': '@primary-color',
- 'timeline-dot-bg': '@component-background',
- 'timeline-item-padding-bottom': '20px',
-
- // Typography
- // ---
- 'typography-title-font-weight': '600',
- 'typography-title-margin-top': '1.2em',
- 'typography-title-margin-bottom': '0.5em',
-
- // Upload
- // ---
- 'upload-actions-color': '@text-color-secondary',
-
- // Steps
- // ---
- 'process-tail-color': '@border-color-split',
- 'steps-nav-arrow-color': 'fade(@black, 25%)',
- 'steps-background': '@component-background',
- 'steps-icon-size': '32px',
- 'steps-icon-custom-size': '@steps-icon-size',
- 'steps-icon-custom-top': '0px',
- 'steps-icon-custom-font-size': '24px',
- 'steps-icon-top': '-0.5px',
- 'steps-icon-font-size': '@font-size-lg',
- 'steps-icon-margin': '0 8px 0 0',
- 'steps-title-line-height': '@height-base',
- 'steps-small-icon-size': '24px',
- 'steps-small-icon-margin': '0 8px 0 0',
- 'steps-dot-size': '8px',
- 'steps-dot-top': '2px',
- 'steps-current-dot-size': '10px',
- 'steps-description-max-width': '140px',
- 'steps-nav-content-max-width': 'auto',
- 'steps-vertical-icon-width': '16px',
- 'steps-vertical-tail-width': '16px',
- 'steps-vertical-tail-width-sm': '12px',
-
- // Notification
- // ---
- 'notification-bg': '@component-background',
- 'notification-padding-vertical': '16px',
- 'notification-padding-horizontal': '24px',
-
- // Result
- // ---
- 'result-title-font-size': '24px',
- 'result-subtitle-font-size': '@font-size-base',
- 'result-icon-font-size': '72px',
- 'result-extra-margin': '24px 0 0 0',
-
- // Image
- // ---
- 'image-size-base': '48px',
- 'image-font-size-base': '24px',
- 'image-bg': '#f5f5f5',
- 'image-color': '#fff',
- 'image-mask-font-size': '16px',
- 'image-preview-operation-size': '18px',
- 'image-preview-operation-color': '@text-color-dark',
- 'image-preview-operation-disabled-color': 'fade(@image-preview-operation-color, 25%)',
-
- // Segmented
- // ---
- 'segmented-bg': 'fade(@black, 4%)',
- 'segmented-hover-bg': 'fade(@black, 6%)',
- 'segmented-selected-bg': '@white',
- 'segmented-label-color': 'fade(@black, 65%)',
- 'segmented-label-hover-color': '#262626',
- } as const;
-
- // Fill colors. e.g. '@red-1', '@yellow-6'
- Object.keys(token).forEach((key: any) => {
- if (key !== key.toLowerCase()) {
- return;
- }
-
- const value = token[key];
- if (typeof value === 'string') {
- raw[key] = value;
- }
- });
-
- // Convert to string
- const returnData: Record<keyof typeof raw, string> = {} as any;
-
- Object.keys(raw).forEach(key => {
- const value = raw[key];
-
- if (typeof value === 'function') {
- returnData[key] = value(raw);
- } else if (typeof value === 'number' && !key.includes('line-height')) {
- returnData[key] = `${value}px`;
- } else {
- returnData[key] = `${value}`;
- }
- });
-
- return returnData;
-}
diff --git a/components/_theme/getDesignToken.ts b/components/theme/getDesignToken.ts
similarity index 89%
rename from components/_theme/getDesignToken.ts
rename to components/theme/getDesignToken.ts
index d8d93b7ace..5e5c5f11db 100644
--- a/components/_theme/getDesignToken.ts
+++ b/components/theme/getDesignToken.ts
@@ -1,4 +1,4 @@
-import { createTheme, getComputedToken } from '../_util/_cssinjs';
+import { createTheme, getComputedToken } from '../_util/cssinjs';
import type { ThemeConfig } from '../config-provider/context';
import type { AliasToken } from './interface';
import defaultDerivative from './themes/default';
diff --git a/components/theme/index.ts b/components/theme/index.ts
index 92eed83022..481dd08d8e 100644
--- a/components/theme/index.ts
+++ b/components/theme/index.ts
@@ -1,9 +1,10 @@
/* eslint-disable import/prefer-default-export */
+import getDesignToken from './getDesignToken';
+import type { GlobalToken, MappingAlgorithm } from './interface';
import { defaultConfig, useToken as useInternalToken } from './internal';
-import type { GlobalToken } from './interface';
-import defaultAlgorithm from './themes/default';
-import darkAlgorithm from './themes/dark';
import compactAlgorithm from './themes/compact';
+import darkAlgorithm from './themes/dark';
+import defaultAlgorithm from './themes/default';
// ZombieJ: We export as object to user but array in internal.
// This is used to minimize the bundle size for antd package but safe to refactor as object also.
@@ -15,7 +16,7 @@ function useToken() {
return { theme, token, hashId };
}
-export { type GlobalToken };
+export type { GlobalToken, MappingAlgorithm };
export default {
/** @private Test Usage. Do not use in production. */
@@ -28,4 +29,5 @@ export default {
defaultAlgorithm,
darkAlgorithm,
compactAlgorithm,
+ getDesignToken,
};
diff --git a/components/theme/interface/alias.ts b/components/theme/interface/alias.ts
index bd6f228dbe..c19d626489 100644
--- a/components/theme/interface/alias.ts
+++ b/components/theme/interface/alias.ts
@@ -8,124 +8,604 @@ import type { MapToken } from './maps';
export interface AliasToken extends MapToken {
// Background
+ /**
+ * @nameZH 内容区域背景色（悬停）
+ * @nameEN Background color of content area (hover)
+ * @desc 控制内容区域背景色在鼠标悬停时的样式。
+ * @descEN Control the style of background color of content area when mouse hovers over it.
+ */
colorFillContentHover: string;
+ /**
+ * @nameZH 替代背景色
+ * @nameEN Alternative background color
+ * @desc 控制元素替代背景色。
+ * @descEN Control the alternative background color of element.
+ */
colorFillAlter: string;
+ /**
+ * @nameZH 内容区域背景色
+ * @nameEN Background color of content area
+ * @desc 控制内容区域的背景色。
+ * @descEN Control the background color of content area.
+ */
colorFillContent: string;
-
+ /**
+ * @nameZH 容器禁用态下的背景色
+ * @nameEN Disabled container background color
+ * @desc 控制容器在禁用状态下的背景色。
+ * @descEN Control the background color of container in disabled state.
+ */
colorBgContainerDisabled: string;
+ /**
+ * @nameZH 文本悬停态背景色
+ * @nameEN Text hover background color
+ * @desc 控制文本在悬停状态下的背景色。
+ * @descEN Control the background color of text in hover state.
+ */
colorBgTextHover: string;
+ /**
+ * @nameZH 文本激活态背景色
+ * @nameEN Text active background color
+ * @desc 控制文本在激活状态下的背景色。
+ * @descEN Control the background color of text in active state.
+ */
colorBgTextActive: string;
// Border
+ /**
+ * @nameZH 背景边框颜色
+ * @nameEN Background border color
+ * @desc 控制元素背景边框的颜色。
+ * @descEN Control the color of background border of element.
+ */
colorBorderBg: string;
/**
* @nameZH 分割线颜色
+ * @nameEN Separator Color
* @desc 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。
+ * @descEN Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.
*/
colorSplit: string;
// Text
+ /**
+ * @nameZH 占位文本颜色
+ * @nameEN Placeholder Text Color
+ * @desc 控制占位文本的颜色。
+ * @descEN Control the color of placeholder text.
+ */
colorTextPlaceholder: string;
+ /**
+ * @nameZH 禁用字体颜色
+ * @nameEN Disabled Text Color
+ * @desc 控制禁用状态下的字体颜色。
+ * @descEN Control the color of text in disabled state.
+ */
colorTextDisabled: string;
+ /**
+ * @nameZH 标题字体颜色
+ * @nameEN Heading Text Color
+ * @desc 控制标题字体颜色。
+ * @descEN Control the font color of heading.
+ */
colorTextHeading: string;
+ /**
+ * @nameZH 文本标签字体颜色
+ * @nameEN Text label font color
+ * @desc 控制文本标签字体颜色。
+ * @descEN Control the font color of text label.
+ */
colorTextLabel: string;
+ /**
+ * @nameZH 文本描述字体颜色
+ * @nameEN Text description font color
+ * @desc 控制文本描述字体颜色。
+ * @descEN Control the font color of text description.
+ */
colorTextDescription: string;
+ /**
+ * @nameZH 固定文本高亮颜色
+ * @nameEN Fixed text highlight color
+ * @desc 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。
+ * @descEN Control the highlight color of text with background color, such as the text in Primary Button components.
+ */
colorTextLightSolid: string;
- /** Weak action. Such as `allowClear` or Alert close button */
+ /**
+ /**
+ * @nameZH 弱操作图标颜色
+ * @nameEN Weak action icon color
+ * @desc 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。
+ * @descEN Weak action. Such as `allowClear` or Alert close button
+ */
colorIcon: string;
- /** Weak action hover color. Such as `allowClear` or Alert close button */
- colorIconHover: string;
- colorLink: string;
- colorLinkHover: string;
- colorLinkActive: string;
+ /** */
+ /**
+ * @nameZH 弱操作图标悬浮态颜色
+ * @nameEN Weak action icon hover color
+ * @desc 控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。
+ * @descEN Weak action hover color. Such as `allowClear` or Alert close button
+ */
+ colorIconHover: string;
+ /**
+ * @nameZH 高亮颜色
+ * @nameEN Highlight color
+ * @desc 控制页面元素高亮时的颜色。
+ * @descEN Control the color of page element when highlighted.
+ */
colorHighlight: string;
+ /**
+ * @nameZH 输入组件的 Outline 颜色
+ * @nameEN Input component outline color
+ * @desc 控制输入组件的外轮廓线颜色。
+ * @descEN Control the outline color of input component.
+ */
controlOutline: string;
+
+ /**
+ * @nameZH 警告状态下的 Outline 颜色
+ * @nameEN Warning outline color
+ * @desc 控制输入组件警告状态下的外轮廓线颜色。
+ * @descEN Control the outline color of input component in warning state.
+ */
colorWarningOutline: string;
+
+ /**
+ * @nameZH 错误状态下的 Outline 颜色
+ * @nameEN Error outline color
+ * @desc 控制输入组件错误状态下的外轮廓线颜色。
+ * @descEN Control the outline color of input component in error state.
+ */
colorErrorOutline: string;
// Font
- /** Operation icon in Select, Cascader, etc. icon fontSize. Normal is same as fontSizeSM */
+ /**
+ * @nameZH 选择器、级联选择器等中的操作图标字体大小
+ * @nameEN Operation icon font size in Select, Cascader, etc.
+ * @desc 控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。
+ * @descEN Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.
+ */
fontSizeIcon: number;
- /** For heading like h1, h2, h3 or option selected item */
+ /**
+ * @nameZH 标题类组件（如 h1、h2、h3）或选中项的字体粗细
+ * @nameEN Font weight for heading components (such as h1, h2, h3) or selected item
+ * @desc 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。
+ * @descEN Control the font weight of heading components (such as h1, h2, h3) or selected item.
+ */
fontWeightStrong: number;
// Control
+
+ /**
+ * @nameZH 输入组件的外轮廓线宽度
+ * @nameEN Input component outline width
+ * @desc 控制输入组件的外轮廓线宽度。
+ * @descEN Control the outline width of input component.
+ */
controlOutlineWidth: number;
+
+ /**
+ * @nameZH 控制组件项在鼠标悬浮时的背景颜色
+ * @nameEN Background color of control component item when hovering
+ * @desc 控制组件项在鼠标悬浮时的背景颜色。
+ * @descEN Control the background color of control component item when hovering.
+ */
controlItemBgHover: string; // Note. It also is a color
+
+ /**
+ * @nameZH 控制组件项在激活状态下的背景颜色
+ * @nameEN Background color of control component item when active
+ * @desc 控制组件项在激活状态下的背景颜色。
+ * @descEN Control the background color of control component item when active.
+ */
controlItemBgActive: string; // Note. It also is a color
+
+ /**
+ * @nameZH 控制组件项在鼠标悬浮且激活状态下的背景颜色
+ * @nameEN Background color of control component item when hovering and active
+ * @desc 控制组件项在鼠标悬浮且激活状态下的背景颜色。
+ * @descEN Control the background color of control component item when hovering and active.
+ */
controlItemBgActiveHover: string; // Note. It also is a color
+
+ /**
+ * @nameZH 控制组件的交互大小
+ * @nameEN Interactive size of control component
+ * @desc 控制组件的交互大小。
+ * @descEN Control the interactive size of control component.
+ */
controlInteractiveSize: number;
+
+ /**
+ * @nameZH 控制组件项在禁用状态下的激活背景颜色
+ * @nameEN Background color of control component item when active and disabled
+ * @desc 控制组件项在禁用状态下的激活背景颜色。
+ * @descEN Control the background color of control component item when active and disabled.
+ */
controlItemBgActiveDisabled: string; // Note. It also is a color
+ // Line
+ /**
+ * @nameZH 线条宽度(聚焦态)
+ * @nameEN Line width(focus state)
+ * @desc 控制线条的宽度，当组件处于聚焦态时。
+ * @descEN Control the width of the line when the component is in focus state.
+ */
+ lineWidthFocus: number;
+
// Padding
+ /**
+ * @nameZH 极小内间距
+ * @nameEN Extra extra small padding
+ * @desc 控制元素的极小内间距。
+ * @descEN Control the extra extra small padding of the element.
+ */
paddingXXS: number;
+ /**
+ * @nameZH 特小内间距
+ * @nameEN Extra small padding
+ * @desc 控制元素的特小内间距。
+ * @descEN Control the extra small padding of the element.
+ */
paddingXS: number;
+ /**
+ * @nameZH 小内间距
+ * @nameEN Small padding
+ * @desc 控制元素的小内间距。
+ * @descEN Control the small padding of the element.
+ */
paddingSM: number;
+ /**
+ * @nameZH 内间距
+ * @nameEN Padding
+ * @desc 控制元素的内间距。
+ * @descEN Control the padding of the element.
+ */
padding: number;
+ /**
+ * @nameZH 中等内间距
+ * @nameEN Medium padding
+ * @desc 控制元素的中等内间距。
+ * @descEN Control the medium padding of the element.
+ */
paddingMD: number;
+ /**
+ * @nameZH 大内间距
+ * @nameEN Large padding
+ * @desc 控制元素的大内间距。
+ * @descEN Control the large padding of the element.
+ */
paddingLG: number;
+ /**
+ * @nameZH 特大内间距
+ * @nameEN Extra large padding
+ * @desc 控制元素的特大内间距。
+ * @descEN Control the extra large padding of the element.
+ */
paddingXL: number;
// Padding Content
+ /**
+ * @nameZH 内容水平内间距（LG）
+ * @nameEN Content horizontal padding (LG)
+ * @desc 控制内容元素水平内间距，适用于大屏幕设备。
+ * @descEN Control the horizontal padding of content element, suitable for large screen devices.
+ */
paddingContentHorizontalLG: number;
+ /**
+ * @nameZH 内容水平内间距
+ * @nameEN Content horizontal padding
+ * @desc 控制内容元素水平内间距。
+ * @descEN Control the horizontal padding of content element.
+ */
paddingContentHorizontal: number;
+ /**
+ * @nameZH 内容水平内间距（SM）
+ * @nameEN Content horizontal padding (SM)
+ * @desc 控制内容元素水平内间距，适用于小屏幕设备。
+ * @descEN Control the horizontal padding of content element, suitable for small screen devices.
+ */
paddingContentHorizontalSM: number;
+ /**
+ * @nameZH 内容垂直内间距（LG）
+ * @nameEN Content vertical padding (LG)
+ * @desc 控制内容元素垂直内间距，适用于大屏幕设备。
+ * @descEN Control the vertical padding of content element, suitable for large screen devices.
+ */
paddingContentVerticalLG: number;
+ /**
+ * @nameZH 内容垂直内间距
+ * @nameEN Content vertical padding
+ * @desc 控制内容元素垂直内间距。
+ * @descEN Control the vertical padding of content element.
+ */
paddingContentVertical: number;
+ /**
+ * @nameZH 内容垂直内间距（SM）
+ * @nameEN Content vertical padding (SM)
+ * @desc 控制内容元素垂直内间距，适用于小屏幕设备。
+ * @descEN Control the vertical padding of content element, suitable for small screen devices.
+ */
paddingContentVerticalSM: number;
// Margin
+ /**
+ * @nameZH 外边距 XXS
+ * @nameEN Margin XXS
+ * @desc 控制元素外边距，最小尺寸。
+ * @descEN Control the margin of an element, with the smallest size.
+ */
marginXXS: number;
+ /**
+ * @nameZH 外边距 XS
+ * @nameEN Margin XS
+ * @desc 控制元素外边距，小尺寸。
+ * @descEN Control the margin of an element, with a small size.
+ */
marginXS: number;
+ /**
+ * @nameZH 外边距 SM
+ * @nameEN Margin SM
+ * @desc 控制元素外边距，中小尺寸。
+ * @descEN Control the margin of an element, with a medium-small size.
+ */
marginSM: number;
+ /**
+ * @nameZH 外边距
+ * @nameEN Margin
+ * @desc 控制元素外边距，中等尺寸。
+ * @descEN Control the margin of an element, with a medium size.
+ */
margin: number;
+ /**
+ * @nameZH 外边距 MD
+ * @nameEN Margin MD
+ * @desc 控制元素外边距，中大尺寸。
+ * @descEN Control the margin of an element, with a medium-large size.
+ */
marginMD: number;
+ /**
+ * @nameZH 外边距 LG
+ * @nameEN Margin LG
+ * @desc 控制元素外边距，大尺寸。
+ * @descEN Control the margin of an element, with a large size.
+ */
marginLG: number;
+ /**
+ * @nameZH 外边距 XL
+ * @nameEN Margin XL
+ * @desc 控制元素外边距，超大尺寸。
+ * @descEN Control the margin of an element, with an extra-large size.
+ */
marginXL: number;
+ /**
+ * @nameZH 外边距 XXL
+ * @nameEN Margin XXL
+ * @desc 控制元素外边距，最大尺寸。
+ * @descEN Control the margin of an element, with the largest size.
+ */
marginXXL: number;
// =============== Legacy: should be remove ===============
+ /**
+ * @nameZH 加载状态透明度
+ * @nameEN Loading opacity
+ * @desc 控制加载状态的透明度。
+ * @descEN Control the opacity of the loading state.
+ */
opacityLoading: number;
+ /**
+ * @nameZH 一级阴影
+ * @nameEN Box shadow
+ * @desc 控制元素阴影样式。
+ * @descEN Control the box shadow style of an element.
+ */
boxShadow: string;
+ /**
+ * @nameZH 二级阴影
+ * @nameEN Secondary box shadow
+ * @desc 控制元素二级阴影样式。
+ * @descEN Control the secondary box shadow style of an element.
+ */
boxShadowSecondary: string;
+ /**
+ * @nameZH 三级阴影
+ * @nameEN Tertiary box shadow
+ * @desc 控制元素三级盒子阴影样式。
+ * @descEN Control the tertiary box shadow style of an element.
+ */
boxShadowTertiary: string;
+ /**
+ * @nameZH 链接文本装饰
+ * @nameEN Link text decoration
+ * @desc 控制链接文本的装饰样式。
+ * @descEN Control the text decoration style of a link.
+ */
linkDecoration: CSSProperties['textDecoration'];
+ /**
+ * @nameZH 链接鼠标悬浮时文本装饰
+ * @nameEN Link text decoration on mouse hover
+ * @desc 控制链接鼠标悬浮时文本的装饰样式。
+ * @descEN Control the text decoration style of a link on mouse hover.
+ */
linkHoverDecoration: CSSProperties['textDecoration'];
+ /**
+ * @nameZH 链接聚焦时文本装饰
+ * @nameEN Link text decoration on focus
+ * @desc 控制链接聚焦时文本的装饰样式。
+ * @descEN Control the text decoration style of a link on focus.
+ */
linkFocusDecoration: CSSProperties['textDecoration'];
+ /**
+ * @nameZH 控制水平内间距
+ * @nameEN Control horizontal padding
+ * @desc 控制元素水平内间距。
+ * @descEN Control the horizontal padding of an element.
+ */
controlPaddingHorizontal: number;
+ /**
+ * @nameZH 控制中小尺寸水平内间距
+ * @nameEN Control horizontal padding with a small-medium size
+ * @desc 控制元素中小尺寸水平内间距。
+ * @descEN Control the horizontal padding of an element with a small-medium size.
+ */
controlPaddingHorizontalSM: number;
// Media queries breakpoints
+ /**
+ * @nameZH 屏幕宽度（像素） - 超小屏幕
+ * @nameEN Screen width (pixels) - Extra small screens
+ * @desc 控制超小屏幕的屏幕宽度。
+ * @descEN Control the screen width of extra small screens.
+ */
screenXS: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超小屏幕最小值
+ * @nameEN Screen width (pixels) - Extra small screens minimum value
+ * @desc 控制超小屏幕的最小宽度。
+ * @descEN Control the minimum width of extra small screens.
+ */
screenXSMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超小屏幕最大值
+ * @nameEN Screen width (pixels) - Extra small screens maximum value
+ * @desc 控制超小屏幕的最大宽度。
+ * @descEN Control the maximum width of extra small screens.
+ */
screenXSMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 小屏幕
+ * @nameEN Screen width (pixels) - Small screens
+ * @desc 控制小屏幕的屏幕宽度。
+ * @descEN Control the screen width of small screens.
+ */
screenSM: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 小屏幕最小值
+ * @nameEN Screen width (pixels) - Small screens minimum value
+ * @desc 控制小屏幕的最小宽度。
+ * @descEN Control the minimum width of small screens.
+ */
screenSMMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 小屏幕最大值
+ * @nameEN Screen width (pixels) - Small screens maximum value
+ * @desc 控制小屏幕的最大宽度。
+ * @descEN Control the maximum width of small screens.
+ */
screenSMMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 中等屏幕
+ * @nameEN Screen width (pixels) - Medium screens
+ * @desc 控制中等屏幕的屏幕宽度。
+ * @descEN Control the screen width of medium screens.
+ */
screenMD: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 中等屏幕最小值
+ * @nameEN Screen width (pixels) - Medium screens minimum value
+ * @desc 控制中等屏幕的最小宽度。
+ * @descEN Control the minimum width of medium screens.
+ */
screenMDMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 中等屏幕最大值
+ * @nameEN Screen width (pixels) - Medium screens maximum value
+ * @desc 控制中等屏幕的最大宽度。
+ * @descEN Control the maximum width of medium screens.
+ */
screenMDMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 大屏幕
+ * @nameEN Screen width (pixels) - Large screens
+ * @desc 控制大屏幕的屏幕宽度。
+ * @descEN Control the screen width of large screens.
+ */
screenLG: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 大屏幕最小值
+ * @nameEN Screen width (pixels) - Large screens minimum value
+ * @desc 控制大屏幕的最小宽度。
+ * @descEN Control the minimum width of large screens.
+ */
screenLGMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 大屏幕最大值
+ * @nameEN Screen width (pixels) - Large screens maximum value
+ * @desc 控制大屏幕的最大宽度。
+ * @descEN Control the maximum width of large screens.
+ */
screenLGMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超大屏幕
+ * @nameEN Screen width (pixels) - Extra large screens
+ * @desc 控制超大屏幕的屏幕宽度。
+ * @descEN Control the screen width of extra large screens.
+ */
screenXL: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超大屏幕最小值
+ * @nameEN Screen width (pixels) - Extra large screens minimum value
+ * @desc 控制超大屏幕的最小宽度。
+ * @descEN Control the minimum width of extra large screens.
+ */
screenXLMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超大屏幕最大值
+ * @nameEN Screen width (pixels) - Extra large screens maximum value
+ * @desc 控制超大屏幕的最大宽度。
+ * @descEN Control the maximum width of extra large screens.
+ */
screenXLMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超大屏幕
+ * @nameEN Screen width (pixels) - Extra extra large screens.
+ * @desc 控制超超大屏幕的屏幕宽度。
+ * @descEN Control the screen width of extra extra large screens.
+ */
screenXXL: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超大屏幕最小值
+ * @nameEN Screen width (pixels) - Extra extra large screens minimum value
+ * @desc 控制超超大屏幕的最小宽度。
+ * @descEN Control the minimum width of extra extra large screens.
+ */
screenXXLMin: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超大屏幕最大值
+ * @nameEN Screen width (pixels) - Extra extra large screens maximum value
+ * @desc 控制超超大屏幕的最大宽度。
+ * @descEN Control the maximum width of extra extra large screens.
+ */
screenXXLMax: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超超大屏幕
+ * @nameEN Screen width (pixels) - Extra extra extra large screens.
+ * @desc 控制超超超大屏幕的屏幕宽度。
+ * @descEN Control the screen width of extra extra extra large screens.
+ */
screenXXXL: number;
+ /**
+ * @nameZH 屏幕宽度（像素） - 超超超大屏幕最小值
+ * @nameEN Screen width (pixels) - Extra extra extra large screens minimum value
+ * @desc 控制超超超大屏幕的最小宽度。
+ * @descEN Control the minimum width of extra extra extra large screens.
+ */
screenXXXLMin: number;
- /** Used for DefaultButton, Switch which has default outline */
+ /**
+ * @deprecated
+ * Used for DefaultButton, Switch which has default outline
+ * @desc 默认样式的 Outline 颜色
+ * @descEN Default style outline color.
+ */
controlTmpOutline: string;
// FIXME: component box-shadow, should be removed
diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts
index 6a235294b5..00f6a59509 100644
--- a/components/theme/interface/components.ts
+++ b/components/theme/interface/components.ts
@@ -1,21 +1,33 @@
+import type { ComponentToken as WaveToken } from '../../_util/wave/style';
+import type { ComponentToken as AffixComponentToken } from '../../affix/style';
import type { ComponentToken as AlertComponentToken } from '../../alert/style';
import type { ComponentToken as AnchorComponentToken } from '../../anchor/style';
+import type { ComponentToken as AppComponentToken } from '../../app/style';
import type { ComponentToken as AvatarComponentToken } from '../../avatar/style';
+import type { ComponentToken as BadgeComponentToken } from '../../badge/style';
+import type { ComponentToken as BreadcrumbComponentToken } from '../../breadcrumb/style';
import type { ComponentToken as ButtonComponentToken } from '../../button/style';
-import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style';
import type { ComponentToken as CalendarComponentToken } from '../../calendar/style';
import type { ComponentToken as CardComponentToken } from '../../card/style';
import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style';
import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';
+// import type { ComponentToken as ColorPickerComponentToken } from '../../color-picker/style';
+import type { ComponentToken as CommentComponentToken } from '../../comment/style';
import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
+import type { ComponentToken as DescriptionsComponentToken } from '../../descriptions/style';
import type { ComponentToken as DividerComponentToken } from '../../divider/style';
-import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
import type { ComponentToken as DrawerComponentToken } from '../../drawer/style';
+import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style';
import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
+import type { ComponentToken as FlexComponentToken } from '../../flex/style';
+import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style';
+import type { ComponentToken as FormComponentToken } from '../../form/style';
+import type { ComponentToken as GridComponentToken } from '../../grid/style';
import type { ComponentToken as ImageComponentToken } from '../../image/style';
import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
+import type { ComponentToken as InputComponentToken } from '../../input/style';
import type { ComponentToken as LayoutComponentToken } from '../../layout/style';
import type { ComponentToken as ListComponentToken } from '../../list/style';
import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
@@ -23,9 +35,12 @@ import type { ComponentToken as MenuComponentToken } from '../../menu/style';
import type { ComponentToken as MessageComponentToken } from '../../message/style';
import type { ComponentToken as ModalComponentToken } from '../../modal/style';
import type { ComponentToken as NotificationComponentToken } from '../../notification/style';
+import type { ComponentToken as PageHeaderComponentToken } from '../../page-header/style';
+import type { ComponentToken as PaginationComponentToken } from '../../pagination/style';
import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
+import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
import type { ComponentToken as RadioComponentToken } from '../../radio/style';
import type { ComponentToken as RateComponentToken } from '../../rate/style';
import type { ComponentToken as ResultComponentToken } from '../../result/style';
@@ -35,53 +50,55 @@ import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/st
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
import type { ComponentToken as SpaceComponentToken } from '../../space/style';
import type { ComponentToken as SpinComponentToken } from '../../spin/style';
+import type { ComponentToken as StatisticComponentToken } from '../../statistic/style';
import type { ComponentToken as StepsComponentToken } from '../../steps/style';
+import type { ComponentToken as SwitchComponentToken } from '../../switch/style';
import type { ComponentToken as TableComponentToken } from '../../table/style';
import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
import type { ComponentToken as TagComponentToken } from '../../tag/style';
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
+import type { ComponentToken as TourComponentToken } from '../../tour/style';
import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
+import type { ComponentToken as TreeSelectComponentToken } from '../../tree-select/style';
+import type { ComponentToken as TreeComponentToken } from '../../tree/style';
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
-import type { ComponentToken as TourComponentToken } from '../../tour/style';
-import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style';
-import type { ComponentToken as AppComponentToken } from '../../app/style';
-import type { ComponentToken as WaveToken } from '../../_util/wave/style';
-import type { ComponentToken as FlexToken } from '../../flex/style';
export interface ComponentTokenMap {
- Affix?: {};
+ Affix?: AffixComponentToken;
Alert?: AlertComponentToken;
Anchor?: AnchorComponentToken;
Avatar?: AvatarComponentToken;
- Badge?: {};
+ Badge?: BadgeComponentToken;
Button?: ButtonComponentToken;
- Breadcrumb?: {};
+ Breadcrumb?: BreadcrumbComponentToken;
Card?: CardComponentToken;
Carousel?: CarouselComponentToken;
Cascader?: CascaderComponentToken;
Checkbox?: CheckboxComponentToken;
+ // ColorPicker?: ColorPickerComponentToken;
Collapse?: CollapseComponentToken;
- Comment?: {};
+ Comment?: CommentComponentToken;
DatePicker?: DatePickerComponentToken;
- Descriptions?: {};
+ Descriptions?: DescriptionsComponentToken;
Divider?: DividerComponentToken;
Drawer?: DrawerComponentToken;
Dropdown?: DropdownComponentToken;
Empty?: EmptyComponentToken;
+ Flex?: FlexComponentToken;
FloatButton?: FloatButtonComponentToken;
- Form?: {};
- Grid?: {};
+ Form?: FormComponentToken;
+ Grid?: GridComponentToken;
Image?: ImageComponentToken;
- Input?: {};
+ Input?: InputComponentToken;
InputNumber?: InputNumberComponentToken;
Layout?: LayoutComponentToken;
List?: ListComponentToken;
Mentions?: MentionsComponentToken;
Notification?: NotificationComponentToken;
- PageHeader?: {};
- Pagination?: {};
+ PageHeader?: PageHeaderComponentToken;
+ Pagination?: PaginationComponentToken;
Popover?: PopoverComponentToken;
Popconfirm?: PopconfirmComponentToken;
Rate?: RateComponentToken;
@@ -92,11 +109,11 @@ export interface ComponentTokenMap {
Skeleton?: SkeletonComponentToken;
Slider?: SliderComponentToken;
Spin?: SpinComponentToken;
- Statistic?: {};
- Switch?: {};
+ Statistic?: StatisticComponentToken;
+ Switch?: SwitchComponentToken;
Tag?: TagComponentToken;
- Tree?: {};
- TreeSelect?: {};
+ Tree?: TreeComponentToken;
+ TreeSelect?: TreeSelectComponentToken;
Typography?: TypographyComponentToken;
Timeline?: TimelineComponentToken;
Transfer?: TransferComponentToken;
@@ -114,8 +131,7 @@ export interface ComponentTokenMap {
Tour?: TourComponentToken;
QRCode?: QRCodeComponentToken;
App?: AppComponentToken;
- Flex?: FlexToken;
- // /** @private Internal TS definition. Do not use. */
+ /** @private Internal TS definition. Do not use. */
Wave?: WaveToken;
}
diff --git a/components/theme/interface/index.ts b/components/theme/interface/index.ts
index a63b53ca28..bd0f9942eb 100644
--- a/components/theme/interface/index.ts
+++ b/components/theme/interface/index.ts
@@ -1,5 +1,12 @@
-import type { ComponentTokenMap } from './components';
+import type { CSSInterpolation, DerivativeFunc } from '../../_util/cssinjs';
import type { AliasToken } from './alias';
+import type { ComponentTokenMap } from './components';
+import type { MapToken } from './maps';
+import type { SeedToken } from './seeds';
+import type { VueNode } from '../..//_util/type';
+import type { Ref } from 'vue';
+
+export type MappingAlgorithm = DerivativeFunc<SeedToken, MapToken>;
export type OverrideToken = {
[key in keyof ComponentTokenMap]: Partial<ComponentTokenMap[key]> & Partial<AliasToken>;
@@ -8,18 +15,30 @@ export type OverrideToken = {
/** Final token which contains the components level override */
export type GlobalToken = AliasToken & ComponentTokenMap;
-export { PresetColors } from './presetColors';
-export type { PresetColorType, ColorPalettes, PresetColorKey } from './presetColors';
-export type { SeedToken } from './seeds';
+export type { AliasToken } from './alias';
+export type { ComponentTokenMap } from './components';
export type {
- MapToken,
ColorMapToken,
ColorNeutralMapToken,
CommonMapToken,
+ FontMapToken,
HeightMapToken,
+ MapToken,
SizeMapToken,
- FontMapToken,
StyleMapToken,
} from './maps';
-export type { AliasToken } from './alias';
-export type { ComponentTokenMap } from './components';
+export { PresetColors } from './presetColors';
+export type {
+ LegacyColorPalettes,
+ ColorPalettes,
+ PresetColorKey,
+ PresetColorType,
+} from './presetColors';
+export type { SeedToken } from './seeds';
+
+export type UseComponentStyleResult = [(node: VueNode) => VueNode, Ref<string>];
+
+export type GenerateStyle<
+ ComponentToken extends object = AliasToken,
+ ReturnType = CSSInterpolation,
+> = (token: ComponentToken) => ReturnType;
diff --git a/components/theme/interface/maps/colors.ts b/components/theme/interface/maps/colors.ts
index 961c1661e7..659209d8df 100644
--- a/components/theme/interface/maps/colors.ts
+++ b/components/theme/interface/maps/colors.ts
@@ -13,25 +13,31 @@ export interface ColorNeutralMapToken {
/**
* @nameZH 一级文本色
+ * @nameEN Text Color
* @desc 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。
+ * @descEN Default text color which comply with W3C standards, and this color is also the darkest neutral color.
*/
colorText: string;
/**
* @nameZH 二级文本色
+ * @nameEN Secondary Text Color
* @desc 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。
+ * @descEN The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.
*/
colorTextSecondary: string;
/**
* @nameZH 三级文本色
* @desc 第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。
+ * @descEN The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc.
*/
colorTextTertiary: string;
/**
* @nameZH 四级文本色
* @desc 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。
+ * @descEN The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.
*/
colorTextQuaternary: string;
@@ -58,24 +64,28 @@ export interface ColorNeutralMapToken {
/**
* @nameZH 一级填充色
* @desc 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。
+ * @descEN The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider.
*/
colorFill: string;
/**
* @nameZH 二级填充色
* @desc 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。
+ * @descEN The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc.
*/
colorFillSecondary: string;
/**
* @nameZH 三级填充色
* @desc 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。
+ * @descEN The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.
*/
colorFillTertiary: string;
/**
* @nameZH 四级填充色
* @desc 最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。
+ * @descEN The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc.
*/
colorFillQuaternary: string;
@@ -83,27 +93,39 @@ export interface ColorNeutralMapToken {
/**
* @nameZH 布局背景色
+ * @nameEN Layout Background Color
* @desc 该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的
+ * @descEN This color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong.
*/
colorBgLayout: string;
/**
* @nameZH 组件容器背景色
* @desc 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。
+ * @descEN Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.
*/
colorBgContainer: string;
/**
* @nameZH 浮层容器背景色
* @desc 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。
+ * @descEN Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc.
*/
colorBgElevated: string;
/**
* @nameZH 引起注意的背景色
* @desc 该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。
+ * @descEN This color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip.
*/
colorBgSpotlight: string;
+ /**
+ * @nameZH 毛玻璃容器背景色
+ * @nameEN Frosted glass container background color
+ * @desc 控制毛玻璃容器的背景色，通常为透明色。
+ * @descEN Control the background color of frosted glass container, usually transparent.
+ */
+ colorBgBlur: string;
}
/**
@@ -112,12 +134,15 @@ export interface ColorNeutralMapToken {
interface ColorPrimaryMapToken {
/**
* @nameZH 品牌主色
- * @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一，用于产品的主色调、主按钮、主图标、主文本等 */
+ * @nameEN Primary color of the brand
+ * @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一，用于产品的主色调、主按钮、主图标、主文本等
+ * @descEN The brand color is one of the most intuitive visual elements that reflects product characteristics and communication concepts, and is used for the main color tone, main buttons, main icons, main text, etc. of the product.
+ */
colorPrimary: string; // 6
/**
* @nameZH 主色浅色背景色
- * @nameEN Light Background Color of Primary Color
+ * @nameEN Light background color of primary color
* @desc 主色浅色背景颜色，一般用于视觉层级较弱的选中状态。
* @descEN Light background color of primary color, usually used for weak visual level selection state.
*/
@@ -125,49 +150,65 @@ interface ColorPrimaryMapToken {
/**
* @nameZH 主色浅色背景悬浮态
+ * @nameEN Hover state of light background color of primary color
* @desc 与主色浅色背景颜色相对应的悬浮态颜色。
+ * @descEN The hover state color corresponding to the light background color of the primary color.
*/
colorPrimaryBgHover: string; // 2
/**
* @nameZH 主色描边色
- * @desc 主色梯度下的描边用色，用在 Slider 组件的描边上
+ * @nameEN Border color of primary color
+ * @desc 主色梯度下的描边用色，用在 Slider 等组件的描边上。
+ * @descEN The stroke color under the main color gradient, used on the stroke of components such as Slider.
*/
colorPrimaryBorder: string; // 3
/**
* @nameZH 主色描边色悬浮态
- * @desc 主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用
+ * @nameEN Hover state of border color of primary color
+ * @desc 主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。
+ * @descEN The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button.
*/
colorPrimaryBorderHover: string; // 4
/**
* @nameZH 主色悬浮态
- * @desc 主色梯度下的悬浮态，使用频率很高
+ * @nameEN Hover state of primary color
+ * @desc 主色梯度下的悬浮态。
+ * @descEN Hover state under the main color gradient.
*/
colorPrimaryHover: string; // 5
/**
* @nameZH 主色激活态
- * @desc 主色梯度下的深色激活态
+ * @nameEN Active state of primary color
+ * @desc 主色梯度下的深色激活态。
+ * @descEN Dark active state under the main color gradient.
*/
colorPrimaryActive: string; // 7
/**
* @nameZH 主色文本悬浮态
- * @desc 主色梯度下的文本悬浮态
+ * @nameEN Hover state of text color of primary color
+ * @desc 主色梯度下的文本悬浮态。
+ * @descEN Hover state of text color under the main color gradient.
*/
colorPrimaryTextHover: string; // 8
/**
* @nameZH 主色文本
- * @desc 主色梯度下的文本颜色
+ * @nameEN Text color of primary color
+ * @desc 主色梯度下的文本颜色。
+ * @descEN Text color under the main color gradient.
*/
colorPrimaryText: string; // 9
/**
- * @nameZH 主色文本
- * @desc 主色梯度下的文本激活态
+ * @nameZH 主色文本激活态
+ * @nameEN Active state of text color of primary color
+ * @desc 主色梯度下的文本激活态。
+ * @descEN Active state of text color under the main color gradient.
*/
colorPrimaryTextActive: string; // 10
}
@@ -191,49 +232,65 @@ interface ColorSuccessMapToken {
/**
* @nameZH 成功色的描边色
+ * @nameEN Border Color of Success Color
* @desc 成功色的描边色，用于 Tag 和 Alert 的成功态描边色
+ * @descEN Border color of success color, used for Tag and Alert success state border color
*/
colorSuccessBorder: string; // 3
/**
* @nameZH 成功色的描边色悬浮态
+ * @nameEN Hover State Color of Success Border
* @desc 成功色的描边色悬浮态
+ * @descEN Hover state color of success color border
*/
colorSuccessBorderHover: string; // 4
/**
* @nameZH 成功色的深色悬浮态
+ * @nameEN Hover State Color of Dark Success
* @desc 成功色的深色悬浮态
+ * @descEN Hover state color of dark success color
*/
colorSuccessHover: string; // 5
/**
* @nameZH 成功色
+ * @nameEN Success Color
* @desc 默认的成功色，如 Result、Progress 等组件中都有使用该颜色
+ * @descEN Default success color, used in components such as Result and Progress
*/
colorSuccess: string; // 6
/**
* @nameZH 成功色的深色激活态
+ * @nameEN Active State Color of Dark Success
* @desc 成功色的深色激活态
+ * @descEN Active state color of dark success color
*/
colorSuccessActive: string; // 7
/**
* @nameZH 成功色的文本悬浮态
+ * @nameEN Hover State Color of Success Text
* @desc 成功色的文本悬浮态
+ * @descEN Hover state color of success color text
*/
colorSuccessTextHover: string; // 8
/**
* @nameZH 成功色的文本默认态
+ * @nameEN Default State Color of Success Text
* @desc 成功色的文本默认态
+ * @descEN Default state color of success color text
*/
colorSuccessText: string; // 9
/**
* @nameZH 成功色的文本激活态
+ * @nameEN Active State Color of Success Text
* @desc 成功色的文本激活态
+ * @descEN Active state color of success color text
*/
colorSuccessTextActive: string; // 10
}
@@ -241,60 +298,81 @@ interface ColorSuccessMapToken {
interface ColorWarningMapToken {
/**
* @nameZH 警戒色的浅色背景颜色
+ * @nameEN Warning background color
+ * @desc 警戒色的浅色背景颜色
+ * @descEN The background color of the warning state.
*/
colorWarningBg: string; // 1
/**
* @nameZH 警戒色的浅色背景色悬浮态
+ * @nameEN Warning background color hover state
* @desc 警戒色的浅色背景色悬浮态
+ * @descEN The hover state background color of the warning state.
*/
colorWarningBgHover: string; // 2
/**
* @nameZH 警戒色的描边色
+ * @nameEN Warning border color
* @desc 警戒色的描边色
+ * @descEN The border color of the warning state.
*/
colorWarningBorder: string; // 3
/**
* @nameZH 警戒色的描边色悬浮态
+ * @nameEN Warning border color hover state
* @desc 警戒色的描边色悬浮态
+ * @descEN The hover state border color of the warning state.
*/
colorWarningBorderHover: string; // 4
/**
* @nameZH 警戒色的深色悬浮态
+ * @nameEN Warning hover color
* @desc 警戒色的深色悬浮态
+ * @descEN The hover state of the warning color.
*/
colorWarningHover: string; // 5
/**
* @nameZH 警戒色
+ * @nameEN Warning color
* @desc 最常用的警戒色，例如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该颜色
+ * @descEN The most commonly used warning color, used for warning components such as Notification, Alert, or input components.
*/
colorWarning: string; // 6
/**
* @nameZH 警戒色的深色激活态
+ * @nameEN Warning active color
* @desc 警戒色的深色激活态
+ * @descEN The active state of the warning color.
*/
colorWarningActive: string; // 7
/**
* @nameZH 警戒色的文本悬浮态
+ * @nameEN Warning text hover state
* @desc 警戒色的文本悬浮态
+ * @descEN The hover state of the text in the warning color.
*/
colorWarningTextHover: string; // 8
/**
* @nameZH 警戒色的文本默认态
+ * @nameEN Warning text default state
* @desc 警戒色的文本默认态
+ * @descEN The default state of the text in the warning color.
*/
colorWarningText: string; // 9
/**
* @nameZH 警戒色的文本激活态
+ * @nameEN Warning text active state
* @desc 警戒色的文本激活态
+ * @descEN The active state of the text in the warning color.
*/
colorWarningTextActive: string; // 10
}
@@ -302,53 +380,81 @@ interface ColorWarningMapToken {
interface ColorInfoMapToken {
/**
* @nameZH 信息色的浅色背景颜色
- * @desc 信息色的浅色背景颜色
+ * @nameEN Light background color of information color
+ * @desc 信息色的浅色背景颜色。
+ * @descEN Light background color of information color.
*/
colorInfoBg: string; // 1
/**
* @nameZH 信息色的浅色背景色悬浮态
- * @desc 信息色的浅色背景色悬浮态
+ * @nameEN Hover state of light background color of information color
+ * @desc 信息色的浅色背景色悬浮态。
+ * @descEN Hover state of light background color of information color.
*/
colorInfoBgHover: string; // 2
/**
* @nameZH 信息色的描边色
+ * @nameEN Border color of information color
+ * @desc 信息色的描边色。
+ * @descEN Border color of information color.
*/
colorInfoBorder: string; // 3
/**
* @nameZH 信息色的描边色悬浮态
+ * @nameEN Hover state of border color of information color
+ * @desc 信息色的描边色悬浮态。
+ * @descEN Hover state of border color of information color.
*/
colorInfoBorderHover: string; // 4
/**
* @nameZH 信息色的深色悬浮态
+ * @nameEN Hover state of dark color of information color
+ * @desc 信息色的深色悬浮态。
+ * @descEN Hover state of dark color of information color.
*/
colorInfoHover: string; // 5
/**
* @nameZH 信息色
+ * @nameEN Information color
+ * @desc 信息色。
+ * @descEN Information color.
*/
colorInfo: string; // 6
/**
* @nameZH 信息色的深色激活态
+ * @nameEN Active state of dark color of information color
+ * @desc 信息色的深色激活态。
+ * @descEN Active state of dark color of information color.
*/
colorInfoActive: string; // 7
/**
* @nameZH 信息色的文本悬浮态
+ * @nameEN Hover state of text color of information color
+ * @desc 信息色的文本悬浮态。
+ * @descEN Hover state of text color of information color.
*/
colorInfoTextHover: string; // 8
/**
* @nameZH 信息色的文本默认态
+ * @nameEN Default state of text color of information color
+ * @desc 信息色的文本默认态。
+ * @descEN Default state of text color of information color.
*/
colorInfoText: string; // 9
/**
* @nameZH 信息色的文本激活态
+ * @nameEN Active state of text color of information color
+ * @desc 信息色的文本激活态。
+ * @descEN Active state of text color of information color.
*/
colorInfoTextActive: string; // 10
}
@@ -356,62 +462,117 @@ interface ColorInfoMapToken {
interface ColorErrorMapToken {
/**
* @nameZH 错误色的浅色背景颜色
+ * @nameEN Error background color
+ * @desc 错误色的浅色背景颜色
+ * @descEN The background color of the error state.
*/
colorErrorBg: string; // 1
/**
* @nameZH 错误色的浅色背景色悬浮态
+ * @nameEN Error background color hover state
+ * @desc 错误色的浅色背景色悬浮态
+ * @descEN The hover state background color of the error state.
*/
colorErrorBgHover: string; // 2
/**
* @nameZH 错误色的描边色
+ * @nameEN Error border color
+ * @desc 错误色的描边色
+ * @descEN The border color of the error state.
*/
colorErrorBorder: string; // 3
/**
* @nameZH 错误色的描边色悬浮态
+ * @nameEN Error border color hover state
+ * @desc 错误色的描边色悬浮态
+ * @descEN The hover state border color of the error state.
*/
colorErrorBorderHover: string; // 4
/**
* @nameZH 错误色的深色悬浮态
+ * @nameEN Error hover color
+ * @desc 错误色的深色悬浮态
+ * @descEN The hover state of the error color.
*/
colorErrorHover: string; // 5
/**
* @nameZH 错误色
+ * @nameEN Error color
+ * @desc 错误色
+ * @descEN The color of the error state.
*/
colorError: string; // 6
/**
* @nameZH 错误色的深色激活态
+ * @nameEN Error active color
+ * @desc 错误色的深色激活态
+ * @descEN The active state of the error color.
*/
colorErrorActive: string; // 7
/**
* @nameZH 错误色的文本悬浮态
+ * @nameEN Error text hover state
+ * @desc 错误色的文本悬浮态
+ * @descEN The hover state of the text in the error color.
*/
colorErrorTextHover: string; // 8
/**
* @nameZH 错误色的文本默认态
+ * @nameEN Error text default state
+ * @desc 错误色的文本默认态
+ * @descEN The default state of the text in the error color.
*/
colorErrorText: string; // 9
/**
* @nameZH 错误色的文本激活态
+ * @nameEN Error text active state
+ * @desc 错误色的文本激活态
+ * @descEN The active state of the text in the error color.
*/
colorErrorTextActive: string; // 10
}
+export interface ColorLinkMapToken {
+ /**
+ * @nameZH 超链接颜色
+ * @nameEN Hyperlink color
+ * @desc 控制超链接的颜色。
+ * @descEN Control the color of hyperlink.
+ */
+ colorLink: string;
+ /**
+ * @nameZH 超链接悬浮颜色
+ * @nameEN Hyperlink hover color
+ * @desc 控制超链接悬浮时的颜色。
+ * @descEN Control the color of hyperlink when hovering.
+ */
+ colorLinkHover: string;
+ /**
+ * @nameZH 超链接激活颜色
+ * @nameEN Hyperlink active color
+ * @desc 控制超链接被点击时的颜色。
+ * @descEN Control the color of hyperlink when clicked.
+ */
+ colorLinkActive: string;
+}
+
export interface ColorMapToken
extends ColorNeutralMapToken,
ColorPrimaryMapToken,
ColorSuccessMapToken,
ColorWarningMapToken,
ColorErrorMapToken,
- ColorInfoMapToken {
+ ColorInfoMapToken,
+ ColorLinkMapToken {
/**
* @nameZH 纯白色
* @desc 不随主题变化的纯白色
diff --git a/components/theme/interface/maps/font.ts b/components/theme/interface/maps/font.ts
index c7407ca168..40ed00716f 100644
--- a/components/theme/interface/maps/font.ts
+++ b/components/theme/interface/maps/font.ts
@@ -1,49 +1,139 @@
export interface FontMapToken {
// Font Size
+ /**
+ * @desc 小号字体大小
+ * @descEN Small font size
+ */
fontSizeSM: number;
+ /**
+ * @desc 标准字体大小
+ * @descEN Standard font size
+ */
fontSize: number;
+ /**
+ * @desc 大号字体大小
+ * @descEN Large font size
+ */
fontSizeLG: number;
+ /**
+ * @desc 超大号字体大小
+ * @descEN Super large font size
+ */
fontSizeXL: number;
/**
* @nameZH 一级标题字号
+ * @nameEN Font size of heading level 1
* @desc H1 标签所使用的字号
+ * @descEN Font size of h1 tag.
* @default 38
*/
fontSizeHeading1: number;
/**
* @nameZH 二级标题字号
+ * @nameEN Font size of heading level 2
* @desc h2 标签所使用的字号
+ * @descEN Font size of h2 tag.
* @default 30
*/
fontSizeHeading2: number;
/**
* @nameZH 三级标题字号
+ * @nameEN Font size of heading level 3
* @desc h3 标签使用的字号
+ * @descEN Font size of h3 tag.
* @default 24
*/
fontSizeHeading3: number;
/**
* @nameZH 四级标题字号
+ * @nameEN Font size of heading level 4
* @desc h4 标签使用的字号
+ * @descEN Font size of h4 tag.
* @default 20
*/
fontSizeHeading4: number;
/**
* @nameZH 五级标题字号
+ * @nameEN Font size of heading level 5
* @desc h5 标签使用的字号
+ * @descEN Font size of h5 tag.
* @default 16
*/
fontSizeHeading5: number;
// LineHeight
+ /**
+ * @desc 文本行高
+ * @descEN Line height of text.
+ */
lineHeight: number;
+ /**
+ * @desc 大型文本行高
+ * @descEN Line height of large text.
+ */
lineHeightLG: number;
+ /**
+ * @desc 小型文本行高
+ * @descEN Line height of small text.
+ */
lineHeightSM: number;
+ // TextHeight
+ /**
+ * Round of fontSize * lineHeight
+ * @internal
+ */
+ fontHeight: number;
+ /**
+ * Round of fontSizeSM * lineHeightSM
+ * @internal
+ */
+ fontHeightSM: number;
+ /**
+ * Round of fontSizeLG * lineHeightLG
+ * @internal
+ */
+ fontHeightLG: number;
+
+ /**
+ * @nameZH 一级标题行高
+ * @nameEN Line height of heading level 1
+ * @desc H1 标签所使用的行高
+ * @descEN Line height of h1 tag.
+ * @default 1.4
+ */
lineHeightHeading1: number;
+ /**
+ * @nameZH 二级标题行高
+ * @nameEN Line height of heading level 2
+ * @desc h2 标签所使用的行高
+ * @descEN Line height of h2 tag.
+ * @default 1.35
+ */
lineHeightHeading2: number;
+ /**
+ * @nameZH 三级标题行高
+ * @nameEN Line height of heading level 3
+ * @desc h3 标签所使用的行高
+ * @descEN Line height of h3 tag.
+ * @default 1.3
+ */
lineHeightHeading3: number;
+ /**
+ * @nameZH 四级标题行高
+ * @nameEN Line height of heading level 4
+ * @desc h4 标签所使用的行高
+ * @descEN Line height of h4 tag.
+ * @default 1.25
+ */
lineHeightHeading4: number;
+ /**
+ * @nameZH 五级标题行高
+ * @nameEN Line height of heading level 5
+ * @desc h5 标签所使用的行高
+ * @descEN Line height of h5 tag.
+ * @default 1.2
+ */
lineHeightHeading5: number;
}
diff --git a/components/theme/interface/maps/index.ts b/components/theme/interface/maps/index.ts
index 1b780d7cf1..29d3f53d74 100644
--- a/components/theme/interface/maps/index.ts
+++ b/components/theme/interface/maps/index.ts
@@ -1,19 +1,31 @@
-import type { ColorPalettes } from '../presetColors';
+import type { ColorPalettes, LegacyColorPalettes } from '../presetColors';
import type { SeedToken } from '../seeds';
-import type { SizeMapToken, HeightMapToken } from './size';
import type { ColorMapToken } from './colors';
-import type { StyleMapToken } from './style';
import type { FontMapToken } from './font';
+import type { HeightMapToken, SizeMapToken } from './size';
+import type { StyleMapToken } from './style';
export * from './colors';
-export * from './style';
-export * from './size';
export * from './font';
+export * from './size';
+export * from './style';
export interface CommonMapToken extends StyleMapToken {
// Motion
+ /**
+ * @desc 动效播放速度，快速。用于小型元素动画交互
+ * @descEN Motion speed, fast speed. Used for small element animation interaction.
+ */
motionDurationFast: string;
+ /**
+ * @desc 动效播放速度，中速。用于中型元素动画交互
+ * @descEN Motion speed, medium speed. Used for medium element animation interaction.
+ */
motionDurationMid: string;
+ /**
+ * @desc 动效播放速度，慢速。用于大型元素如面板动画交互
+ * @descEN Motion speed, slow speed. Used for large element animation interaction.
+ */
motionDurationSlow: string;
}
@@ -25,6 +37,7 @@ export interface CommonMapToken extends StyleMapToken {
export interface MapToken
extends SeedToken,
ColorPalettes,
+ LegacyColorPalettes,
ColorMapToken,
SizeMapToken,
HeightMapToken,
diff --git a/components/theme/interface/maps/size.ts b/components/theme/interface/maps/size.ts
index d617e15d97..f69f5a9278 100644
--- a/components/theme/interface/maps/size.ts
+++ b/components/theme/interface/maps/size.ts
@@ -51,18 +51,24 @@ export interface HeightMapToken {
/**
* @nameZH 更小的组件高度
* @nameEN XS component height
+ * @desc 更小的组件高度
+ * @descEN XS component height
*/
controlHeightXS: number;
/**
* @nameZH 较小的组件高度
* @nameEN SM component height
+ * @desc 较小的组件高度
+ * @descEN SM component height
*/
controlHeightSM: number;
/**
* @nameZH 较高的组件高度
* @nameEN LG component height
+ * @desc 较高的组件高度
+ * @descEN LG component height
*/
controlHeightLG: number;
}
diff --git a/components/theme/interface/maps/style.ts b/components/theme/interface/maps/style.ts
index b7b516e865..e4faf7dac8 100644
--- a/components/theme/interface/maps/style.ts
+++ b/components/theme/interface/maps/style.ts
@@ -10,8 +10,9 @@ export interface StyleMapToken {
/**
* @nameZH XS号圆角
+ * @nameEN XS Border Radius
* @desc XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。
- * @descEN XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components.
+ * @descEN XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius.
* @default 2
*/
borderRadiusXS: number;
@@ -32,7 +33,11 @@ export interface StyleMapToken {
*/
borderRadiusLG: number;
/**
+ * @nameZH 外部圆角
+ * @nameEN Outer Border Radius
* @default 4
+ * @desc 外部圆角
+ * @descEN Outer border radius
*/
borderRadiusOuter: number;
}
diff --git a/components/theme/interface/presetColors.ts b/components/theme/interface/presetColors.ts
index b20aafbf6d..e160935e6b 100644
--- a/components/theme/interface/presetColors.ts
+++ b/components/theme/interface/presetColors.ts
@@ -20,6 +20,13 @@ export type PresetColorType = Record<PresetColorKey, string>;
type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-export type ColorPalettes = {
+export type LegacyColorPalettes = {
+ /**
+ * @deprecated
+ */
[key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
};
+
+export type ColorPalettes = {
+ [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string;
+};
diff --git a/components/theme/interface/seeds.ts b/components/theme/interface/seeds.ts
index 22b07d81ab..e7ac8a234d 100644
--- a/components/theme/interface/seeds.ts
+++ b/components/theme/interface/seeds.ts
@@ -50,7 +50,7 @@ export interface SeedToken extends PresetColorType {
/**
* @nameZH 基础文本色
* @nameEN Seed Text Color
- * @desc 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但**请不要在代码中直接使用该 Seed Token**！
+ * @desc 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
* @descEN Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
*/
colorTextBase: string;
@@ -58,24 +58,42 @@ export interface SeedToken extends PresetColorType {
/**
* @nameZH 基础背景色
* @nameEN Seed Background Color
- * @desc 用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但 **请不要在代码中直接使用该 Seed Token** ！
+ * @desc 用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
* @descEN Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
*/
colorBgBase: string;
+ /**
+ * @nameZH 超链接颜色
+ * @nameEN Hyperlink color
+ * @desc 控制超链接的颜色。
+ * @descEN Control the color of hyperlink.
+ */
+ colorLink: string;
+
// ---------- Font ---------- //
/**
* @nameZH 字体
- * @nameEN FontFamily
+ * @nameEN Font family for default text
* @desc Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。
+ * @descEN The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.
*/
fontFamily: string;
+ /**
+ * @nameZH 代码字体
+ * @nameEN Font family for code text
+ * @desc 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素
+ * @descEN Code font, used for code, pre and kbd elements in Typography
+ */
+ fontFamilyCode: string;
+
/**
* @nameZH 默认字号
* @nameEN Default Font Size
* @desc 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。
+ * @descEN The most widely used font size in the design system, from which the text gradient will be derived.
* @default 14
*/
fontSize: number;
@@ -130,6 +148,8 @@ export interface SeedToken extends PresetColorType {
/**
* @nameZH 组件箭头尺寸
+ * @desc 组件箭头的尺寸
+ * @descEN The size of the component arrow
*/
sizePopupArrow: number;
@@ -184,24 +204,57 @@ export interface SeedToken extends PresetColorType {
motionUnit: number;
/**
- * @nameZH 动画基础时长
+ * @nameZH 动画基础时长。
+ * @nameEN Animation Base Duration.
*/
motionBase: number;
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
motionEaseOutCirc: string;
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
motionEaseInOutCirc: string;
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
motionEaseInOut: string;
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
motionEaseOutBack: string;
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
motionEaseInBack: string;
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
motionEaseInQuint: string;
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
motionEaseOutQuint: string;
+ /**
+ * @desc 预设动效曲率
+ * @descEN Preset motion curve.
+ */
motionEaseOut: string;
// ---------- Style ---------- //
@@ -210,7 +263,17 @@ export interface SeedToken extends PresetColorType {
* @nameZH 线框风格
* @nameEN Wireframe Style
* @desc 用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项
+ * @descEN Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item
* @default false
*/
wireframe: boolean;
+
+ /**
+ * @nameZH 动画风格
+ * @nameEN Motion Style
+ * @desc 用于配置动画效果，为 `false` 时则关闭动画
+ * @descEN Used to configure the motion effect, when it is `false`, the motion is turned off
+ * @default false
+ */
+ motion: boolean;
}
diff --git a/components/theme/internal.ts b/components/theme/internal.ts
index 55c00b984b..27f81de86d 100644
--- a/components/theme/internal.ts
+++ b/components/theme/internal.ts
@@ -1,146 +1,51 @@
-import type { CSSInterpolation, Theme } from '../_util/cssinjs';
-import { createTheme, useCacheToken, useStyleRegister } from '../_util/cssinjs';
+import { useStyleRegister } from '../_util/cssinjs';
-import version from '../version';
import type {
AliasToken,
- GlobalToken,
- MapToken,
- OverrideToken,
- PresetColorType,
+ GenerateStyle,
PresetColorKey,
+ PresetColorType,
SeedToken,
+ UseComponentStyleResult,
} from './interface';
import { PresetColors } from './interface';
-import defaultDerivative from './themes/default';
-import defaultSeedToken from './themes/seed';
-import formatToken from './util/alias';
-import type { FullToken } from './util/genComponentStyleHook';
-import genComponentStyleHook from './util/genComponentStyleHook';
-import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
-import type { VueNode } from '../_util/type';
-import { objectType } from '../_util/type';
-import type { ComputedRef, InjectionKey, Ref } from 'vue';
-import {
- triggerRef,
- unref,
- defineComponent,
- provide,
- computed,
- inject,
- watch,
- shallowRef,
-} from 'vue';
-
-const defaultTheme = createTheme(defaultDerivative);
-
+import useToken from './useToken';
+import type { FullToken, GetDefaultToken } from './util/genComponentStyleHook';
+import genComponentStyleHook, {
+ genSubStyleComponent,
+ genStyleHooks,
+} from './util/genComponentStyleHook';
+import genPresetColor from './util/genPresetColor';
+import statisticToken, { merge as mergeToken } from './util/statistic';
+import useResetIconStyle from './util/useResetIconStyle';
+import calc from './util/calc';
+import { getLineHeight } from './themes/shared/genFontSizes';
+
+export { defaultConfig, DesignTokenProvider } from './context';
export {
- // colors
PresetColors,
- // Statistic
- statistic,
- statisticToken,
+ genComponentStyleHook,
+ genSubStyleComponent,
+ genPresetColor,
+ genStyleHooks,
mergeToken,
+ statisticToken,
+ calc,
+ getLineHeight,
// hooks
+ useResetIconStyle,
useStyleRegister,
- genComponentStyleHook,
+ useToken,
};
export type {
- SeedToken,
AliasToken,
- PresetColorType,
- PresetColorKey,
// FIXME: Remove this type
AliasToken as DerivativeToken,
FullToken,
+ GenerateStyle,
+ PresetColorKey,
+ PresetColorType,
+ SeedToken,
+ UseComponentStyleResult,
+ GetDefaultToken,
};
-
-// ================================ Context =================================
-// To ensure snapshot stable. We disable hashed in test env.
-export const defaultConfig = {
- token: defaultSeedToken,
- hashed: true,
-};
-
-export interface DesignTokenContext {
- token: Partial<AliasToken>;
- theme?: Theme<SeedToken, MapToken>;
- components?: OverrideToken;
- hashed?: string | boolean;
-}
-//defaultConfig
-const DesignTokenContextKey: InjectionKey<ComputedRef<DesignTokenContext>> =
- Symbol('DesignTokenContext');
-
-export const globalDesignTokenApi = shallowRef<DesignTokenContext>();
-
-export const useDesignTokenProvider = (value: ComputedRef<DesignTokenContext>) => {
- provide(DesignTokenContextKey, value);
- watch(
- value,
- () => {
- globalDesignTokenApi.value = unref(value);
- triggerRef(globalDesignTokenApi);
- },
- { immediate: true, deep: true },
- );
-};
-
-export const useDesignTokenInject = () => {
- return inject(
- DesignTokenContextKey,
- computed(() => globalDesignTokenApi.value || defaultConfig),
- );
-};
-export const DesignTokenProvider = defineComponent({
- props: {
- value: objectType<DesignTokenContext>(),
- },
- setup(props, { slots }) {
- useDesignTokenProvider(computed(() => props.value));
- return () => {
- return slots.default?.();
- };
- },
-});
-// ================================== Hook ==================================
-export function useToken(): [
- ComputedRef<Theme<SeedToken, MapToken>>,
- ComputedRef<GlobalToken>,
- ComputedRef<string>,
-] {
- const designTokenContext = inject<ComputedRef<DesignTokenContext>>(
- DesignTokenContextKey,
- computed(() => globalDesignTokenApi.value || defaultConfig),
- );
-
- const salt = computed(() => `${version}-${designTokenContext.value.hashed || ''}`);
-
- const mergedTheme = computed(() => designTokenContext.value.theme || defaultTheme);
-
- const cacheToken = useCacheToken<GlobalToken, SeedToken>(
- mergedTheme,
- computed(() => [defaultSeedToken, designTokenContext.value.token]),
- computed(() => ({
- salt: salt.value,
- override: {
- override: designTokenContext.value.token,
- ...designTokenContext.value.components,
- },
- formatToken,
- })),
- );
-
- return [
- mergedTheme,
- computed(() => cacheToken.value[0]),
- computed(() => (designTokenContext.value.hashed ? cacheToken.value[1] : '')),
- ];
-}
-
-export type UseComponentStyleResult = [(node: VueNode) => VueNode, Ref<string>];
-
-export type GenerateStyle<
- ComponentToken extends object = AliasToken,
- ReturnType = CSSInterpolation,
-> = (token: ComponentToken) => ReturnType;
diff --git a/components/theme/themes/compact/index.ts b/components/theme/themes/compact/index.ts
index 3669d18606..f22dbe7c3f 100644
--- a/components/theme/themes/compact/index.ts
+++ b/components/theme/themes/compact/index.ts
@@ -1,9 +1,9 @@
+import type { DerivativeFunc } from '../../../_util/cssinjs';
import genControlHeight from '../shared/genControlHeight';
import type { MapToken, SeedToken } from '../../interface';
import defaultAlgorithm from '../default';
import genCompactSizeMapToken from './genCompactSizeMapToken';
import genFontMapToken from '../shared/genFontMapToken';
-import type { DerivativeFunc } from '../../../_util/cssinjs';
const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
const mergedMapToken = mapToken ?? defaultAlgorithm(token);
diff --git a/components/theme/themes/dark/colors.ts b/components/theme/themes/dark/colors.ts
index 96e73e3f9e..b3342c99a8 100644
--- a/components/theme/themes/dark/colors.ts
+++ b/components/theme/themes/dark/colors.ts
@@ -46,6 +46,7 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
colorBgContainer: getSolidColor(colorBgBase, 8),
colorBgLayout: getSolidColor(colorBgBase, 0),
colorBgSpotlight: getSolidColor(colorBgBase, 26),
+ colorBgBlur: getAlphaColor(colorTextBase, 0.04),
colorBorder: getSolidColor(colorBgBase, 26),
colorBorderSecondary: getSolidColor(colorBgBase, 19),
diff --git a/components/theme/themes/dark/index.ts b/components/theme/themes/dark/index.ts
index 5368ef3744..a0ff6193e5 100644
--- a/components/theme/themes/dark/index.ts
+++ b/components/theme/themes/dark/index.ts
@@ -1,6 +1,12 @@
import { generate } from '@ant-design/colors';
import type { DerivativeFunc } from '../../../_util/cssinjs';
-import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
+import type {
+ ColorPalettes,
+ LegacyColorPalettes,
+ MapToken,
+ PresetColorType,
+ SeedToken,
+} from '../../interface';
import { defaultPresetColors } from '../seed';
import genColorMapToken from '../shared/genColorMapToken';
import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
@@ -13,8 +19,9 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
return new Array(10).fill(1).reduce((prev, _, i) => {
prev[`${colorKey}-${i + 1}`] = colors[i];
+ prev[`${colorKey}${i + 1}`] = colors[i];
return prev;
- }, {}) as ColorPalettes;
+ }, {}) as ColorPalettes & LegacyColorPalettes;
})
.reduce((prev, cur) => {
prev = {
@@ -22,7 +29,7 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
...cur,
};
return prev;
- }, {} as ColorPalettes);
+ }, {} as ColorPalettes & LegacyColorPalettes);
const mergedMapToken = mapToken ?? defaultAlgorithm(token);
diff --git a/components/theme/themes/default/colors.ts b/components/theme/themes/default/colors.ts
index b1f5c9ff4a..d0e684dd49 100644
--- a/components/theme/themes/default/colors.ts
+++ b/components/theme/themes/default/colors.ts
@@ -46,6 +46,7 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
colorBgContainer: getSolidColor(colorBgBase, 0),
colorBgElevated: getSolidColor(colorBgBase, 0),
colorBgSpotlight: getAlphaColor(colorTextBase, 0.85),
+ colorBgBlur: 'transparent',
colorBorder: getSolidColor(colorBgBase, 15),
colorBorderSecondary: getSolidColor(colorBgBase, 6),
diff --git a/components/theme/themes/default/index.ts b/components/theme/themes/default/index.ts
index c8f3dbce7e..d558e2cf87 100644
--- a/components/theme/themes/default/index.ts
+++ b/components/theme/themes/default/index.ts
@@ -1,7 +1,13 @@
import { generate } from '@ant-design/colors';
import genControlHeight from '../shared/genControlHeight';
import genSizeMapToken from '../shared/genSizeMapToken';
-import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
+import type {
+ ColorPalettes,
+ LegacyColorPalettes,
+ MapToken,
+ PresetColorType,
+ SeedToken,
+} from '../../interface';
import { defaultPresetColors } from '../seed';
import genColorMapToken from '../shared/genColorMapToken';
import genCommonMapToken from '../shared/genCommonMapToken';
@@ -15,8 +21,9 @@ export default function derivative(token: SeedToken): MapToken {
return new Array(10).fill(1).reduce((prev, _, i) => {
prev[`${colorKey}-${i + 1}`] = colors[i];
+ prev[`${colorKey}${i + 1}`] = colors[i];
return prev;
- }, {}) as ColorPalettes;
+ }, {}) as ColorPalettes & LegacyColorPalettes;
})
.reduce((prev, cur) => {
prev = {
@@ -24,7 +31,7 @@ export default function derivative(token: SeedToken): MapToken {
...cur,
};
return prev;
- }, {} as ColorPalettes);
+ }, {} as ColorPalettes & LegacyColorPalettes);
return {
...token,
diff --git a/components/theme/themes/seed.ts b/components/theme/themes/seed.ts
index 15e6877c94..e24925bbf7 100644
--- a/components/theme/themes/seed.ts
+++ b/components/theme/themes/seed.ts
@@ -26,6 +26,7 @@ const seedToken: SeedToken = {
colorWarning: '#faad14',
colorError: '#ff4d4f',
colorInfo: '#1677ff',
+ colorLink: '',
colorTextBase: '',
colorBgBase: '',
@@ -34,6 +35,7 @@ const seedToken: SeedToken = {
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji'`,
+ fontFamilyCode: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
fontSize: 14,
// Line
@@ -72,5 +74,8 @@ const seedToken: SeedToken = {
// Wireframe
wireframe: false,
+
+ // Motion
+ motion: true,
};
export default seedToken;
diff --git a/components/theme/themes/shared/genColorMapToken.ts b/components/theme/themes/shared/genColorMapToken.ts
index a8ae0b5685..3a3aa8d6db 100644
--- a/components/theme/themes/shared/genColorMapToken.ts
+++ b/components/theme/themes/shared/genColorMapToken.ts
@@ -28,6 +28,10 @@ export default function genColorMapToken(
const infoColors = generateColorPalettes(colorInfoBase);
const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
+ // Color Link
+ const colorLink = seed.colorLink || seed.colorInfo;
+ const linkColors = generateColorPalettes(colorLink);
+
return {
...neutralColors,
@@ -86,6 +90,10 @@ export default function genColorMapToken(
colorInfoText: infoColors[9],
colorInfoTextActive: infoColors[10],
+ colorLinkHover: linkColors[4],
+ colorLink: linkColors[6],
+ colorLinkActive: linkColors[7],
+
colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
colorWhite: '#fff',
};
diff --git a/components/theme/themes/shared/genFontMapToken.ts b/components/theme/themes/shared/genFontMapToken.ts
index b22db23dfe..8cd58e7e21 100644
--- a/components/theme/themes/shared/genFontMapToken.ts
+++ b/components/theme/themes/shared/genFontMapToken.ts
@@ -6,10 +6,17 @@ const genFontMapToken = (fontSize: number): FontMapToken => {
const fontSizes = fontSizePairs.map(pair => pair.size);
const lineHeights = fontSizePairs.map(pair => pair.lineHeight);
+ const fontSizeMD = fontSizes[1];
+ const fontSizeSM = fontSizes[0];
+ const fontSizeLG = fontSizes[2];
+ const lineHeight = lineHeights[1];
+ const lineHeightSM = lineHeights[0];
+ const lineHeightLG = lineHeights[2];
+
return {
- fontSizeSM: fontSizes[0],
- fontSize: fontSizes[1],
- fontSizeLG: fontSizes[2],
+ fontSizeSM,
+ fontSize: fontSizeMD,
+ fontSizeLG,
fontSizeXL: fontSizes[3],
fontSizeHeading1: fontSizes[6],
@@ -18,9 +25,13 @@ const genFontMapToken = (fontSize: number): FontMapToken => {
fontSizeHeading4: fontSizes[3],
fontSizeHeading5: fontSizes[2],
- lineHeight: lineHeights[1],
- lineHeightLG: lineHeights[2],
- lineHeightSM: lineHeights[0],
+ lineHeight,
+ lineHeightLG,
+ lineHeightSM,
+
+ fontHeight: Math.round(lineHeight * fontSizeMD),
+ fontHeightLG: Math.round(lineHeightLG * fontSizeLG),
+ fontHeightSM: Math.round(lineHeightSM * fontSizeSM),
lineHeightHeading1: lineHeights[6],
lineHeightHeading2: lineHeights[5],
diff --git a/components/theme/themes/shared/genFontSizes.ts b/components/theme/themes/shared/genFontSizes.ts
index e6fc1676ec..47c027d498 100644
--- a/components/theme/themes/shared/genFontSizes.ts
+++ b/components/theme/themes/shared/genFontSizes.ts
@@ -1,3 +1,7 @@
+export function getLineHeight(fontSize: number) {
+ return (fontSize + 8) / fontSize;
+}
+
// https://zhuanlan.zhihu.com/p/32746810
export default function getFontSizes(base: number) {
const fontSizes = new Array(10).fill(null).map((_, index) => {
@@ -11,12 +15,8 @@ export default function getFontSizes(base: number) {
fontSizes[1] = base;
- return fontSizes.map(size => {
- const height = size + 8;
-
- return {
- size,
- lineHeight: height / size,
- };
- });
+ return fontSizes.map(size => ({
+ size,
+ lineHeight: getLineHeight(size),
+ }));
}
diff --git a/components/theme/themes/shared/genRadius.ts b/components/theme/themes/shared/genRadius.ts
index 301a8c33fc..0bac4c9887 100644
--- a/components/theme/themes/shared/genRadius.ts
+++ b/components/theme/themes/shared/genRadius.ts
@@ -48,7 +48,7 @@ const genRadius = (
}
return {
- borderRadius: radiusBase > 16 ? 16 : radiusBase,
+ borderRadius: radiusBase,
borderRadiusXS: radiusXS,
borderRadiusSM: radiusSM,
borderRadiusLG: radiusLG,
diff --git a/components/_theme/useToken.ts b/components/theme/useToken.ts
similarity index 97%
rename from components/_theme/useToken.ts
rename to components/theme/useToken.ts
index fa4e94fe54..c78c31f5f7 100644
--- a/components/_theme/useToken.ts
+++ b/components/theme/useToken.ts
@@ -1,5 +1,5 @@
-import type { Theme } from '../_util/_cssinjs';
-import { useCacheToken } from '../_util/_cssinjs';
+import type { Theme } from '../_util/cssinjs';
+import { useCacheToken } from '../_util/cssinjs';
import version from '../version';
import type { DesignTokenProviderProps } from './context';
diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts
index b886bd1db9..6b85352844 100644
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@@ -1,7 +1,7 @@
import { TinyColor } from '@ctrl/tinycolor';
import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../interface';
-import getAlphaColor from './getAlphaColor';
import seedToken from '../themes/seed';
+import getAlphaColor from './getAlphaColor';
/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
type RawMergedToken = MapToken & OverrideToken & { override: Partial<AliasToken> };
@@ -32,14 +32,18 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
const screenXXL = 1600;
const screenXXXL = 2000;
+ // Motion
+ if (mergedToken.motion === false) {
+ const fastDuration = '0s';
+ mergedToken.motionDurationFast = fastDuration;
+ mergedToken.motionDurationMid = fastDuration;
+ mergedToken.motionDurationSlow = fastDuration;
+ }
+
// Generate alias token
const aliasToken: AliasToken = {
...mergedToken,
- colorLink: mergedToken.colorInfoText,
- colorLinkHover: mergedToken.colorInfoHover,
- colorLinkActive: mergedToken.colorInfoActive,
-
// ============== Background ============== //
colorFillContent: mergedToken.colorFillSecondary,
colorFillContentHover: mergedToken.colorFill,
@@ -70,6 +74,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
// Font
fontSizeIcon: mergedToken.fontSizeSM,
+ // Line
+ lineWidthFocus: mergedToken.lineWidth * 4,
+
// Control
lineWidth: mergedToken.lineWidth,
controlOutlineWidth: mergedToken.lineWidth * 2,
@@ -125,9 +132,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
marginXXL: mergedToken.sizeXXL,
boxShadow: `
- 0 1px 2px 0 rgba(0, 0, 0, 0.03),
- 0 1px 6px -1px rgba(0, 0, 0, 0.02),
- 0 2px 4px 0 rgba(0, 0, 0, 0.02)
+ 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+ 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05)
`,
boxShadowSecondary: `
0 6px 16px 0 rgba(0, 0, 0, 0.08),
@@ -161,8 +168,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
screenXXXL,
screenXXXLMin: screenXXXL,
- // FIXME: component box-shadow, should be removed
- boxShadowPopoverArrow: '3px 3px 7px rgba(0, 0, 0, 0.1)',
+ boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
boxShadowCard: `
0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
diff --git a/components/_theme/util/calc/CSSCalculator.ts b/components/theme/util/calc/CSSCalculator.ts
similarity index 100%
rename from components/_theme/util/calc/CSSCalculator.ts
rename to components/theme/util/calc/CSSCalculator.ts
diff --git a/components/_theme/util/calc/NumCalculator.ts b/components/theme/util/calc/NumCalculator.ts
similarity index 100%
rename from components/_theme/util/calc/NumCalculator.ts
rename to components/theme/util/calc/NumCalculator.ts
diff --git a/components/_theme/util/calc/calculator.ts b/components/theme/util/calc/calculator.ts
similarity index 100%
rename from components/_theme/util/calc/calculator.ts
rename to components/theme/util/calc/calculator.ts
diff --git a/components/_theme/util/calc/index.ts b/components/theme/util/calc/index.ts
similarity index 100%
rename from components/_theme/util/calc/index.ts
rename to components/theme/util/calc/index.ts
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index d5879d52e9..d8d3d58dbc 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -1,28 +1,49 @@
/* eslint-disable no-redeclare */
-
-import { useStyleRegister } from '../../_util/cssinjs';
-import type { CSSInterpolation } from '../../_util/cssinjs';
+import type { CSSInterpolation, CSSObject } from '../../_util/cssinjs';
+import { token2CSSVar, useCSSVarRegister, useStyleRegister } from '../../_util/cssinjs';
+import warning from '../../_util/warning';
import { genCommonStyle, genLinkStyle } from '../../style';
-import type { UseComponentStyleResult } from '../internal';
-import { mergeToken, statisticToken, useToken } from '../internal';
-import type { ComponentTokenMap, GlobalToken } from '../interface';
+import type {
+ AliasToken,
+ ComponentTokenMap,
+ GlobalToken,
+ OverrideToken,
+ UseComponentStyleResult,
+} from '../interface';
+import useToken, { ignore, unitless } from '../useToken';
+import genCalc from './calc';
+import type AbstractCalculator from './calc/calculator';
+import genMaxMin from './maxmin';
+import statisticToken, { merge as mergeToken } from './statistic';
+import useResetIconStyle from './useResetIconStyle';
+
import type { Ref } from 'vue';
-import { computed } from 'vue';
+import { defineComponent, computed, createVNode, Fragment } from 'vue';
import { useConfigContextInject } from '../../config-provider/context';
+import type { VueNode } from 'ant-design-vue/es/_util/type';
+import { objectType } from 'ant-design-vue/es/_util/type';
export type OverrideTokenWithoutDerivative = ComponentTokenMap;
export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
-export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
- ComponentTokenMap[ComponentName];
+export type GlobalTokenWithComponent<C extends OverrideComponent> = GlobalToken &
+ ComponentTokenMap[C];
+
+type ComponentToken<C extends OverrideComponent> = Exclude<OverrideToken[C], undefined>;
+type ComponentTokenKey<C extends OverrideComponent> = keyof ComponentToken<C>;
-export interface StyleInfo<ComponentName extends OverrideComponent> {
+export interface StyleInfo {
hashId: string;
prefixCls: string;
rootPrefixCls: string;
iconPrefixCls: string;
- overrideComponentToken: ComponentTokenMap[ComponentName];
}
+export type CSSUtil = {
+ calc: (number: any) => AbstractCalculator;
+ max: (...values: (number | string)[]) => number | string;
+ min: (...values: (number | string)[]) => number | string;
+};
+
export type TokenWithCommonCls<T> = T & {
/** Wrap component class with `.` prefix */
componentCls: string;
@@ -32,57 +53,195 @@ export type TokenWithCommonCls<T> = T & {
iconCls: string;
/** Wrap ant prefixCls class with `.` prefix */
antCls: string;
-};
-export type FullToken<ComponentName extends OverrideComponent> = TokenWithCommonCls<
- GlobalTokenWithComponent<ComponentName>
+} & CSSUtil;
+
+export type FullToken<C extends OverrideComponent> = TokenWithCommonCls<
+ GlobalTokenWithComponent<C>
>;
-export default function genComponentStyleHook<ComponentName extends OverrideComponent>(
- component: ComponentName,
- styleFn: (token: FullToken<ComponentName>, info: StyleInfo<ComponentName>) => CSSInterpolation,
- getDefaultToken?:
- | OverrideTokenWithoutDerivative[ComponentName]
- | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
+export type GenStyleFn<C extends OverrideComponent> = (
+ token: FullToken<C>,
+ info: StyleInfo,
+) => CSSInterpolation;
+
+export type GetDefaultToken<C extends OverrideComponent> =
+ | null
+ | OverrideTokenWithoutDerivative[C]
+ | ((
+ token: AliasToken & Partial<OverrideTokenWithoutDerivative[C]>,
+ ) => OverrideTokenWithoutDerivative[C]);
+
+const getDefaultComponentToken = <C extends OverrideComponent>(
+ component: C,
+ token: Ref<GlobalToken>,
+ getDefaultToken: GetDefaultToken<C>,
+) => {
+ if (typeof getDefaultToken === 'function') {
+ return getDefaultToken(mergeToken<any>(token.value, token.value[component] ?? {}));
+ }
+ return getDefaultToken ?? {};
+};
+
+const getComponentToken = <C extends OverrideComponent>(
+ component: C,
+ token: Ref<GlobalToken>,
+ defaultToken: OverrideTokenWithoutDerivative[C],
+ options?: {
+ deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
+ },
+) => {
+ const customToken = { ...(token.value[component] as ComponentToken<C>) };
+ if (options?.deprecatedTokens) {
+ const { deprecatedTokens } = options;
+ deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
+ if (process.env.NODE_ENV !== 'production') {
+ warning(
+ !customToken?.[oldTokenKey],
+ `Component Token \`${String(
+ oldTokenKey,
+ )}\` of ${component} is deprecated. Please use \`${String(newTokenKey)}\` instead.`,
+ );
+ }
+
+ // Should wrap with `if` clause, or there will be `undefined` in object.
+ if (customToken?.[oldTokenKey] || customToken?.[newTokenKey]) {
+ customToken[newTokenKey] ??= customToken?.[oldTokenKey];
+ }
+ });
+ }
+ const mergedToken: any = { ...defaultToken, ...customToken };
+
+ // Remove same value as global token to minimize size
+ Object.keys(mergedToken).forEach(key => {
+ if (mergedToken[key] === token[key as keyof GlobalToken]) {
+ delete mergedToken[key];
+ }
+ });
+
+ return mergedToken;
+};
+
+const getCompVarPrefix = (component: string, prefix?: string) =>
+ `${[
+ prefix,
+ component.replace(/([A-Z]+)([A-Z][a-z]+)/g, '$1-$2').replace(/([a-z])([A-Z])/g, '$1-$2'),
+ ]
+ .filter(Boolean)
+ .join('-')}`;
+
+export default function genComponentStyleHook<C extends OverrideComponent>(
+ componentName: C | [C, string],
+ styleFn: GenStyleFn<C>,
+ getDefaultToken?: GetDefaultToken<C>,
+ options: {
+ resetStyle?: boolean;
+ // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
+ deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
+ /**
+ * Only use component style in client side. Ignore in SSR.
+ */
+ clientOnly?: boolean;
+ /**
+ * Set order of component style. Default is -999.
+ */
+ order?: number;
+ injectStyle?: boolean;
+ } = {},
) {
+ const cells = (Array.isArray(componentName) ? componentName : [componentName, componentName]) as [
+ C,
+ string,
+ ];
+
+ const [component] = cells;
+ const concatComponent = cells.join('-');
+
return (_prefixCls?: Ref<string>): UseComponentStyleResult => {
const prefixCls = computed(() => _prefixCls?.value);
- const [theme, token, hashId] = useToken();
- const { getPrefixCls, iconPrefixCls } = useConfigContextInject();
+ const [theme, realToken, hashId, token, cssVar] = useToken();
+ const { getPrefixCls, iconPrefixCls, csp } = useConfigContextInject();
+
const rootPrefixCls = computed(() => getPrefixCls());
- const sharedInfo = computed(() => {
+
+ const type = computed(() => (cssVar.value ? 'css' : 'js'));
+ const calc = computed(() => genCalc(type.value));
+ const maxMin = computed(() => genMaxMin(type.value));
+
+ // Shared config
+ // const sharedConfig: Omit<Parameters<typeof useStyleRegister>[0], 'path'> = {
+ // theme: theme.value,
+ // token: token.value,
+ // hashId: hashId.value,
+ // nonce: () => csp.value?.nonce!,
+ // clientOnly: options.clientOnly,
+
+ // // antd is always at top of styles
+ // order: options.order || -999,
+ // };
+
+ const sharedConfig = computed(() => {
return {
theme: theme.value,
token: token.value,
hashId: hashId.value,
- path: ['Shared', rootPrefixCls.value],
+ nonce: () => csp.value && csp.value.nonce,
+ clientOnly: options.clientOnly,
+
+ // antd is always at top of styles
+ order: options.order || -999,
};
});
+
// Generate style for all a tags in antd component.
- useStyleRegister(sharedInfo, () => [
- {
- // Link
- '&': genLinkStyle(token.value),
- },
- ]);
- const componentInfo = computed(() => {
- return {
- theme: theme.value,
- token: token.value,
- hashId: hashId.value,
- path: [component, prefixCls.value, iconPrefixCls.value],
- };
- });
- return [
- useStyleRegister(componentInfo, () => {
+ useStyleRegister(
+ computed(() => ({
+ ...sharedConfig.value,
+ clientOnly: false,
+ path: ['Shared', rootPrefixCls.value],
+ })),
+ () =>
+ [
+ {
+ // Link
+ '&': genLinkStyle(token.value),
+ },
+ ] as CSSObject[],
+ );
+
+ // Generate style for icons
+ useResetIconStyle(iconPrefixCls, csp);
+
+ const wrapSSR = useStyleRegister(
+ computed(() => ({
+ ...sharedConfig.value,
+ path: [concatComponent, prefixCls.value, iconPrefixCls.value],
+ })),
+ () => {
+ if (options.injectStyle === false) {
+ return [];
+ }
+
const { token: proxyToken, flush } = statisticToken(token.value);
- const defaultComponentToken =
- typeof getDefaultToken === 'function'
- ? (getDefaultToken as any)(proxyToken)
- : getDefaultToken;
- const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] };
+ const defaultComponentToken = getDefaultComponentToken(
+ component,
+ realToken,
+ getDefaultToken,
+ );
const componentCls = `.${prefixCls.value}`;
+ const componentToken = getComponentToken(component, realToken, defaultComponentToken, {
+ deprecatedTokens: options.deprecatedTokens,
+ });
+
+ if (cssVar.value) {
+ Object.keys(defaultComponentToken).forEach(key => {
+ defaultComponentToken[key] = `var(${token2CSSVar(
+ key,
+ getCompVarPrefix(component, cssVar.value?.prefix),
+ )})`;
+ });
+ }
const mergedToken = mergeToken<
TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
>(
@@ -92,20 +251,208 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
prefixCls: prefixCls.value,
iconCls: `.${iconPrefixCls.value}`,
antCls: `.${rootPrefixCls.value}`,
+ calc: calc.value,
+ max: maxMin.value.max,
+ min: maxMin.value.min,
},
- mergedComponentToken,
+ cssVar.value ? defaultComponentToken : componentToken,
);
- const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
+
+ const styleInterpolation = styleFn(mergedToken as unknown as FullToken<C>, {
hashId: hashId.value,
prefixCls: prefixCls.value,
rootPrefixCls: rootPrefixCls.value,
iconPrefixCls: iconPrefixCls.value,
- overrideComponentToken: token.value[component],
});
- flush(component, mergedComponentToken);
- return [genCommonStyle(token.value, prefixCls.value), styleInterpolation];
- }),
- hashId,
- ];
+ flush(component, componentToken);
+ return [
+ options.resetStyle === false ? null : genCommonStyle(mergedToken, prefixCls.value),
+ styleInterpolation,
+ ] as CSSObject[];
+ },
+ );
+
+ return [wrapSSR, hashId];
};
}
+
+export interface SubStyleComponentProps {
+ prefixCls: Ref<string>;
+}
+
+// Get from second argument
+type RestParameters<T extends any[]> = T extends [any, ...infer Rest] ? Rest : never;
+
+export const genSubStyleComponent: <C extends OverrideComponent>(
+ componentName: [C, string],
+ ...args: RestParameters<Parameters<typeof genComponentStyleHook<C>>>
+) => any = (componentName, styleFn, getDefaultToken, options) => {
+ const useStyle = genComponentStyleHook(componentName, styleFn, getDefaultToken, {
+ resetStyle: false,
+
+ // Sub Style should default after root one
+ order: -998,
+ ...options,
+ });
+
+ const StyledComponent = defineComponent({
+ props: {
+ prefixCls: String,
+ },
+ setup(props) {
+ const prefixCls = computed(() => props.prefixCls);
+ useStyle(prefixCls);
+ return () => {
+ return null;
+ };
+ },
+ });
+
+ return StyledComponent;
+};
+
+export type CSSVarRegisterProps = {
+ rootCls: string;
+ component: string;
+ cssVar: {
+ prefix?: string;
+ key?: string;
+ };
+};
+
+const genCSSVarRegister = <C extends OverrideComponent>(
+ component: C,
+ getDefaultToken?: GetDefaultToken<C>,
+ options?: {
+ unitless?: {
+ [key in ComponentTokenKey<C>]: boolean;
+ };
+ deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
+
+ injectStyle?: boolean;
+ },
+) => {
+ function prefixToken(key: string) {
+ return `${component}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`;
+ }
+
+ const { unitless: originUnitless = {}, injectStyle = true } = options ?? {};
+ const compUnitless: any = {
+ [prefixToken('zIndexPopup')]: true,
+ };
+ Object.keys(originUnitless).forEach((key: keyof ComponentTokenKey<C>) => {
+ compUnitless[prefixToken(key)] = originUnitless[key];
+ });
+
+ const CSSVarRegister = defineComponent({
+ props: {
+ rootCls: String,
+ component: String,
+ cssVar: objectType<{
+ prefix: string;
+ key: string;
+ }>(),
+ },
+ setup(props) {
+ const [, realToken] = useToken();
+
+ useCSSVarRegister(
+ computed(() => {
+ return {
+ path: [props.component],
+ prefix: props.cssVar.prefix,
+ key: props.cssVar.key!,
+ unitless: {
+ ...unitless,
+ ...compUnitless,
+ },
+ ignore,
+ token: realToken.value,
+ scope: props.rootCls,
+ };
+ }),
+ () => {
+ const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken);
+ const componentToken = getComponentToken(component, realToken, defaultToken, {
+ deprecatedTokens: options?.deprecatedTokens,
+ });
+ Object.keys(defaultToken).forEach(key => {
+ componentToken[prefixToken(key)] = componentToken[key];
+ delete componentToken[key];
+ });
+ return componentToken;
+ },
+ );
+
+ return () => {
+ return null;
+ };
+ },
+ });
+
+ const useCSSVar = (rootCls: Ref<string>) => {
+ const [, , , , cssVar] = useToken();
+
+ return [
+ (node: VueNode): VueNode =>
+ injectStyle && cssVar.value
+ ? createVNode(Fragment, null, [
+ createVNode(CSSVarRegister, {
+ rootCls: rootCls.value,
+ cssVar: cssVar.value,
+ component,
+ }),
+ node,
+ ])
+ : node,
+ computed(() => cssVar.value?.key),
+ ] as const;
+ };
+
+ return useCSSVar;
+};
+
+export const genStyleHooks = <C extends OverrideComponent>(
+ component: C | [C, string],
+ styleFn: GenStyleFn<C>,
+ getDefaultToken?: GetDefaultToken<C>,
+ options?: {
+ resetStyle?: boolean;
+ deprecatedTokens?: [ComponentTokenKey<C>, ComponentTokenKey<C>][];
+ /**
+ * Component tokens that do not need unit.
+ */
+ unitless?: {
+ [key in ComponentTokenKey<C>]: boolean;
+ };
+ /**
+ * Only use component style in client side. Ignore in SSR.
+ */
+ clientOnly?: boolean;
+ /**
+ * Set order of component style.
+ * @default -999
+ */
+ order?: number;
+ /**
+ * Whether generate styles
+ * @default true
+ */
+ injectStyle?: boolean;
+ },
+) => {
+ const useStyle = genComponentStyleHook(component, styleFn, getDefaultToken, options);
+
+ const useCSSVar = genCSSVarRegister(
+ Array.isArray(component) ? component[0] : component,
+ getDefaultToken,
+ options,
+ );
+
+ return (prefixCls: Ref<string>, rootCls: Ref<string> = prefixCls) => {
+ const [, hashId] = useStyle(prefixCls);
+ const [wrapCSSVar, cssVarCls] = useCSSVar(rootCls);
+
+ return [wrapCSSVar, hashId, cssVarCls] as const;
+ };
+};
diff --git a/components/_theme/util/genPresetColor.ts b/components/theme/util/genPresetColor.ts
similarity index 95%
rename from components/_theme/util/genPresetColor.ts
rename to components/theme/util/genPresetColor.ts
index b5383f73c0..0916cc41be 100644
--- a/components/_theme/util/genPresetColor.ts
+++ b/components/theme/util/genPresetColor.ts
@@ -1,5 +1,5 @@
/* eslint-disable import/prefer-default-export */
-import type { CSSObject } from '../../_util/_cssinjs';
+import type { CSSObject } from '../../_util/cssinjs';
import type { AliasToken, PresetColorKey } from '../internal';
import { PresetColors } from '../interface';
import type { TokenWithCommonCls } from './genComponentStyleHook';
diff --git a/components/_theme/util/maxmin.ts b/components/theme/util/maxmin.ts
similarity index 88%
rename from components/_theme/util/maxmin.ts
rename to components/theme/util/maxmin.ts
index 13d07e8ba3..48d60cc122 100644
--- a/components/_theme/util/maxmin.ts
+++ b/components/theme/util/maxmin.ts
@@ -1,4 +1,4 @@
-import { unit } from '../../_util/_cssinjs';
+import { unit } from '../../_util/cssinjs';
export default function genMaxMin(type: 'css' | 'js') {
if (type === 'js') {
diff --git a/components/theme/util/statistic.ts b/components/theme/util/statistic.ts
index 21d0161474..2b29ebacd1 100644
--- a/components/theme/util/statistic.ts
+++ b/components/theme/util/statistic.ts
@@ -1,3 +1,5 @@
+import type { AnyObject } from '../../_util/type';
+
declare const CSSINJS_STATISTIC: any;
const enableStatistic =
@@ -8,7 +10,7 @@ let recording = true;
* This function will do as `Object.assign` in production. But will use Object.defineProperty:get to
* pass all value access in development. To support statistic field usage with alias token.
*/
-export function merge<T extends object>(...objs: Partial<T>[]): T {
+export function merge<T extends AnyObject>(...objs: Partial<T>[]): T {
/* istanbul ignore next */
if (!enableStatistic) {
return Object.assign({}, ...objs);
@@ -34,13 +36,13 @@ export function merge<T extends object>(...objs: Partial<T>[]): T {
return ret;
}
-/** @private Internal Usage. Not use in your production. */
+/** @internal Internal Usage. Not use in your production. */
export const statistic: Record<
string,
{ global: string[]; component: Record<string, string | number> }
> = {};
-/** @private Internal Usage. Not use in your production. */
+/** @internal Internal Usage. Not use in your production. */
// eslint-disable-next-line camelcase
export const _statistic_build_: typeof statistic = {};
@@ -48,13 +50,13 @@ export const _statistic_build_: typeof statistic = {};
function noop() {}
/** Statistic token usage case. Should use `merge` function if you do not want spread record. */
-export default function statisticToken<T extends object>(token: T) {
+const statisticToken = <T extends AnyObject>(token: T) => {
let tokenKeys: Set<string> | undefined;
let proxy = token;
let flush: (componentName: string, componentToken: Record<string, string | number>) => void =
noop;
- if (enableStatistic) {
+ if (enableStatistic && typeof Proxy !== 'undefined') {
tokenKeys = new Set<string>();
proxy = new Proxy(token, {
@@ -67,9 +69,17 @@ export default function statisticToken<T extends object>(token: T) {
});
flush = (componentName, componentToken) => {
- statistic[componentName] = { global: Array.from(tokenKeys!), component: componentToken };
+ statistic[componentName] = {
+ global: Array.from(tokenKeys!),
+ component: {
+ ...statistic[componentName]?.component,
+ ...componentToken,
+ },
+ };
};
}
return { token: proxy, keys: tokenKeys, flush };
-}
+};
+
+export default statisticToken;
diff --git a/components/_theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts
similarity index 88%
rename from components/_theme/util/useResetIconStyle.ts
rename to components/theme/util/useResetIconStyle.ts
index 6ff3c698a1..d6ceee5be1 100644
--- a/components/_theme/util/useResetIconStyle.ts
+++ b/components/theme/util/useResetIconStyle.ts
@@ -1,5 +1,5 @@
-import type { CSSObject } from '../../_util/_cssinjs';
-import { useStyleRegister } from '../../_util/_cssinjs';
+import type { CSSObject } from '../../_util/cssinjs';
+import { useStyleRegister } from '../../_util/cssinjs';
import { resetIcon } from '../../style';
import type { CSPConfig } from '../../config-provider';
import useToken from '../useToken';
diff --git a/site/debugger/demo/demo.vue b/site/debugger/demo/demo.vue
index ea40538e22..50bf1c6e99 100644
--- a/site/debugger/demo/demo.vue
+++ b/site/debugger/demo/demo.vue
@@ -1,6 +1,17 @@
<template>
- <a-tooltip>
- <template #title>prompt text</template>
- Tooltip will show when mouse enter.
- </a-tooltip>
+ <a-button type="primary">Tooltip will show when mouse enter.</a-button>
+ <a-config-provider
+ :theme="{
+ cssVar: {
+ key: 'test',
+ },
+ components: {
+ Button: {
+ colorPrimary: '#123456',
+ },
+ },
+ }"
+ >
+ <a-button type="primary">Tooltip will show when mouse enter.</a-button>
+ </a-config-provider>
</template>
diff --git a/site/src/components/antdv-token-previewer/meta/TokenRelation.ts b/site/src/components/antdv-token-previewer/meta/TokenRelation.ts
index 6ca32f6b31..5e4e761a5a 100644
--- a/site/src/components/antdv-token-previewer/meta/TokenRelation.ts
+++ b/site/src/components/antdv-token-previewer/meta/TokenRelation.ts
@@ -1,7 +1,7 @@
-import type { AliasToken, MapToken, SeedToken } from 'ant-design-vue/es/_theme/interface';
-import defaultMap from 'ant-design-vue/es/_theme/themes/default';
-import seedToken from 'ant-design-vue/es/_theme/themes/seed';
-import formatToken from 'ant-design-vue/es/_theme/util/alias';
+import type { AliasToken, MapToken, SeedToken } from 'ant-design-vue/es/theme/interface';
+import defaultMap from 'ant-design-vue/es/theme/themes/default';
+import seedToken from 'ant-design-vue/es/theme/themes/seed';
+import formatToken from 'ant-design-vue/es/theme/util/alias';
export type PureAliasToken = Omit<AliasToken, keyof MapToken>;
diff --git a/site/src/components/antdv-token-previewer/meta/interface.ts b/site/src/components/antdv-token-previewer/meta/interface.ts
index d0ed2c4281..92347afe69 100644
--- a/site/src/components/antdv-token-previewer/meta/interface.ts
+++ b/site/src/components/antdv-token-previewer/meta/interface.ts
@@ -1,4 +1,4 @@
-import type { ComponentTokenMap } from 'ant-design-vue/es/_theme/interface';
+import type { ComponentTokenMap } from 'ant-design-vue/es/theme/interface';
export interface TokenMeta {
type: string;
diff --git a/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx b/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
index ae9d673efd..f102539c47 100644
--- a/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
+++ b/site/src/components/antdv-token-previewer/token-panel-pro/TokenContent.tsx
@@ -11,7 +11,7 @@ import {
} from 'ant-design-vue';
import type { MutableTheme, SelectedToken } from '../interface';
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
-import seed from 'ant-design-vue/es/_theme/themes/seed';
+import seed from 'ant-design-vue/es/theme/themes/seed';
import tokenMeta from 'ant-design-vue/es/version/token-meta.json';
import classNames from 'ant-design-vue/es/_util/classNames';
diff --git a/site/src/components/antdv-token-previewer/utils/classifyToken.ts b/site/src/components/antdv-token-previewer/utils/classifyToken.ts
index 017c54aad8..7197789e2f 100644
--- a/site/src/components/antdv-token-previewer/utils/classifyToken.ts
+++ b/site/src/components/antdv-token-previewer/utils/classifyToken.ts
@@ -1,4 +1,4 @@
-import type { GlobalToken } from 'ant-design-vue/es/_theme/interface';
+import type { GlobalToken } from 'ant-design-vue/es/theme/interface';
import type { TokenValue } from '../interface';
function defineTokenType<T extends string>(types: T[]) {
diff --git a/site/src/components/antdv-token-previewer/utils/getDesignToken.ts b/site/src/components/antdv-token-previewer/utils/getDesignToken.ts
index 16ac2fe338..ecbc563e0b 100644
--- a/site/src/components/antdv-token-previewer/utils/getDesignToken.ts
+++ b/site/src/components/antdv-token-previewer/utils/getDesignToken.ts
@@ -1,8 +1,8 @@
import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
-import type { GlobalToken, MapToken } from 'ant-design-vue/es/_theme/interface';
-import defaultMap from 'ant-design-vue/es/_theme/themes/default';
-import seed from 'ant-design-vue/es/_theme/themes/seed';
-import formatToken from 'ant-design-vue/es/_theme/util/alias';
+import type { GlobalToken, MapToken } from 'ant-design-vue/es/theme/interface';
+import defaultMap from 'ant-design-vue/es/theme/themes/default';
+import seed from 'ant-design-vue/es/theme/themes/seed';
+import formatToken from 'ant-design-vue/es/theme/util/alias';
export default function getDesignToken(config: ThemeConfig = {}): GlobalToken {
const seedToken = { ...seed, ...config.token };
diff --git a/site/src/components/antdv-token-previewer/utils/makeStyle.tsx b/site/src/components/antdv-token-previewer/utils/makeStyle.tsx
index 79f7ecbe5e..9ef2432918 100644
--- a/site/src/components/antdv-token-previewer/utils/makeStyle.tsx
+++ b/site/src/components/antdv-token-previewer/utils/makeStyle.tsx
@@ -1,12 +1,12 @@
import type { CSSInterpolation } from 'ant-design-vue/es/_util/cssinjs';
import { useStyleRegister } from 'ant-design-vue/es/_util/cssinjs';
import { theme as antdTheme } from 'ant-design-vue';
-import type { GlobalToken } from 'ant-design-vue/es/_theme/interface';
-import { mergeToken } from 'ant-design-vue/es/_theme/internal';
+import type { GlobalToken } from 'ant-design-vue/es/theme/interface';
+import { mergeToken } from 'ant-design-vue/es/theme/internal';
import { computed } from 'vue';
import useConfigInject from 'ant-design-vue/es/config-provider/hooks/useConfigInject';
-import type { UseComponentStyleResult } from 'ant-design-vue/es/_theme/internal';
+import type { UseComponentStyleResult } from 'ant-design-vue/es/theme/internal';
const makeStyle = (
path: string,
styleFn: (token: GlobalToken & { rootCls: string }) => CSSInterpolation,
From a0c93699897b63fa51526505df4369733e02456e Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 11 Nov 2024 11:08:27 +0800
Subject: [PATCH 4/7] feat: alert support cssvar
---
components/alert/index.tsx | 3 +-
components/alert/style/index.ts | 90 +++++++++++++++++++--------------
components/index.ts | 2 +-
3 files changed, 54 insertions(+), 41 deletions(-)
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index f3dead2ba5..9cd8660c99 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -70,7 +70,7 @@ const Alert = defineComponent({
props: alertProps(),
setup(props, { slots, emit, attrs, expose }) {
const { prefixCls, direction } = useConfigInject('alert', props);
- const [wrapSSR, hashId] = useStyle(prefixCls);
+ const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls);
const closing = shallowRef(false);
const closed = shallowRef(false);
const alertNode = shallowRef();
@@ -134,6 +134,7 @@ const Alert = defineComponent({
[`${prefixClsValue}-closable`]: closable,
[`${prefixClsValue}-rtl`]: direction.value === 'rtl',
[hashId.value]: true,
+ [cssVarCls.value]: true,
});
const closeIcon = closable ? (
diff --git a/components/alert/style/index.ts b/components/alert/style/index.ts
index 172674fe57..ffb6f94f39 100644
--- a/components/alert/style/index.ts
+++ b/components/alert/style/index.ts
@@ -1,13 +1,29 @@
-import type { CSSInterpolation, CSSObject } from '../../_util/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { CSSObject, unit } from '../../_util/cssinjs';
+import { FullToken, GenerateStyle, genStyleHooks, GetDefaultToken } from '../../theme/internal';
import { resetComponent } from '../../style';
-
-export interface ComponentToken {}
+import { CSSProperties } from 'vue';
+
+export interface ComponentToken {
+ // Component token here
+ /**
+ * @desc 默认内间距
+ * @descEN Default padding
+ */
+ defaultPadding: CSSProperties['padding'];
+ /**
+ * @desc 带有描述的内间距
+ * @descEN Padding with description
+ */
+ withDescriptionPadding: CSSProperties['padding'];
+ /**
+ * @desc 带有描述时的图标尺寸
+ * @descEN Icon size with description
+ */
+ withDescriptionIconSize: number;
+}
type AlertToken = FullToken<'Alert'> & {
- alertIconSizeLG: number;
- alertPaddingHorizontal: number;
+ // Custom token here
};
const genAlertTypeStyle = (
@@ -17,8 +33,8 @@ const genAlertTypeStyle = (
token: AlertToken,
alertCls: string,
): CSSObject => ({
- backgroundColor: bgColor,
- border: `${token.lineWidth}px ${token.lineType} ${borderColor}`,
+ background: bgColor,
+ border: `${unit(token.lineWidth)} ${token.lineType} ${borderColor}`,
[`${alertCls}-icon`]: {
color: iconColor,
},
@@ -35,12 +51,11 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
lineHeight,
borderRadiusLG: borderRadius,
motionEaseInOutCirc,
- alertIconSizeLG,
+ withDescriptionIconSize,
colorText,
- paddingContentVerticalSM,
- alertPaddingHorizontal,
- paddingMD,
- paddingContentHorizontalLG,
+ colorTextHeading,
+ withDescriptionPadding,
+ defaultPadding,
} = token;
return {
@@ -49,7 +64,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
position: 'relative',
display: 'flex',
alignItems: 'center',
- padding: `${paddingContentVerticalSM}px ${alertPaddingHorizontal}px`, // Fixed horizontal padding here.
+ padding: defaultPadding,
wordWrap: 'break-word',
borderRadius,
@@ -67,14 +82,14 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
lineHeight: 0,
},
- [`&-description`]: {
+ '&-description': {
display: 'none',
fontSize,
lineHeight,
},
'&-message': {
- color: colorText,
+ color: colorTextHeading,
},
[`&${componentCls}-motion-leave`]: {
@@ -96,24 +111,23 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
[`${componentCls}-with-description`]: {
alignItems: 'flex-start',
- paddingInline: paddingContentHorizontalLG,
- paddingBlock: paddingMD,
-
+ padding: withDescriptionPadding,
[`${componentCls}-icon`]: {
marginInlineEnd: marginSM,
- fontSize: alertIconSizeLG,
+ fontSize: withDescriptionIconSize,
lineHeight: 0,
},
[`${componentCls}-message`]: {
display: 'block',
marginBottom: marginXS,
- color: colorText,
+ color: colorTextHeading,
fontSize: fontSizeLG,
},
[`${componentCls}-description`]: {
display: 'block',
+ color: colorText,
},
},
@@ -187,7 +201,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
return {
[componentCls]: {
- [`&-action`]: {
+ '&-action': {
marginInlineStart: marginXS,
},
@@ -196,7 +210,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
padding: 0,
overflow: 'hidden',
fontSize: fontSizeIcon,
- lineHeight: `${fontSizeIcon}px`,
+ lineHeight: unit(fontSizeIcon),
backgroundColor: 'transparent',
border: 'none',
outline: 'none',
@@ -222,19 +236,17 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
};
};
-export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSInterpolation => [
- genBaseStyle(token),
- genTypeStyle(token),
- genActionStyle(token),
-];
-
-export default genComponentStyleHook('Alert', token => {
- const { fontSizeHeading3 } = token;
-
- const alertToken = mergeToken<AlertToken>(token, {
- alertIconSizeLG: fontSizeHeading3,
- alertPaddingHorizontal: 12, // Fixed value here.
- });
+export const prepareComponentToken: GetDefaultToken<'Alert'> = token => {
+ const paddingHorizontal = 12; // Fixed value here.
+ return {
+ withDescriptionIconSize: token.fontSizeHeading3,
+ defaultPadding: `${token.paddingContentVerticalSM}px ${paddingHorizontal}px`,
+ withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
+ };
+};
- return [genAlertStyle(alertToken)];
-});
+export default genStyleHooks(
+ 'Alert',
+ token => [genBaseStyle(token), genTypeStyle(token), genActionStyle(token)],
+ prepareComponentToken,
+);
diff --git a/components/index.ts b/components/index.ts
index 3f86413a3a..d9d945c939 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -2,7 +2,7 @@ import type { App } from 'vue';
import * as components from './components';
import { default as version } from './version';
-import cssinjs from './_util/cssinjs';
+import * as cssinjs from './_util/cssinjs';
export * from './components';
export * from './_util/cssinjs';
From 3375bd4695f87c3068b4221e01a1e22a17e1fa66 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 11 Nov 2024 11:32:01 +0800
Subject: [PATCH 5/7] feat: affix support cssvar
---
components/affix/index.tsx | 25 ++++++++++++++++---------
components/affix/style/index.ts | 25 ++++++++++++++-----------
components/affix/utils.ts | 16 +++++++++++-----
3 files changed, 41 insertions(+), 25 deletions(-)
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 8f4b37710f..95155dd397 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -27,10 +27,11 @@ import useStyle from './style';
function getDefaultTarget() {
return typeof window !== 'undefined' ? window : null;
}
-enum AffixStatus {
- None,
- Prepare,
-}
+const AFFIX_STATUS_NONE = 0;
+const AFFIX_STATUS_PREPARE = 1;
+
+type AffixStatus = typeof AFFIX_STATUS_NONE | typeof AFFIX_STATUS_PREPARE;
+
export interface AffixState {
affixStyle?: CSSProperties;
placeholderStyle?: CSSProperties;
@@ -82,7 +83,7 @@ const Affix = defineComponent({
const state = reactive({
affixStyle: undefined,
placeholderStyle: undefined,
- status: AffixStatus.None,
+ status: AFFIX_STATUS_NONE,
lastAffix: false,
prevTarget: null,
timeout: null,
@@ -98,7 +99,12 @@ const Affix = defineComponent({
const measure = () => {
const { status, lastAffix } = state;
const { target } = props;
- if (status !== AffixStatus.Prepare || !fixedNode.value || !placeholderNode.value || !target) {
+ if (
+ status !== AFFIX_STATUS_PREPARE ||
+ !fixedNode.value ||
+ !placeholderNode.value ||
+ !target
+ ) {
return;
}
@@ -108,7 +114,7 @@ const Affix = defineComponent({
}
const newState = {
- status: AffixStatus.None,
+ status: AFFIX_STATUS_NONE,
} as AffixState;
const placeholderRect = getTargetRect(placeholderNode.value as HTMLElement);
@@ -172,7 +178,7 @@ const Affix = defineComponent({
};
const prepareMeasure = () => {
Object.assign(state, {
- status: AffixStatus.Prepare,
+ status: AFFIX_STATUS_PREPARE,
affixStyle: undefined,
placeholderStyle: undefined,
});
@@ -253,12 +259,13 @@ const Affix = defineComponent({
});
const { prefixCls } = useConfigInject('affix', props);
- const [wrapSSR, hashId] = useStyle(prefixCls);
+ const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls);
return () => {
const { affixStyle, placeholderStyle, status } = state;
const className = classNames({
[prefixCls.value]: affixStyle,
[hashId.value]: true,
+ [cssVarCls.value]: true,
});
const restProps = omit(props, [
'prefixCls',
diff --git a/components/affix/style/index.ts b/components/affix/style/index.ts
index f97731ae57..be895766d1 100644
--- a/components/affix/style/index.ts
+++ b/components/affix/style/index.ts
@@ -1,17 +1,21 @@
import type { CSSObject } from '../../_util/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { FullToken, GenerateStyle, genStyleHooks, GetDefaultToken } from '../../theme/internal';
-export interface ComponentToken {}
+export interface ComponentToken {
+ /**
+ * @desc 弹出层的 z-index
+ * @descEN z-index of popup
+ */
+ zIndexPopup: number;
+}
interface AffixToken extends FullToken<'Affix'> {
- zIndexPopup: number;
+ //
}
// ============================== Shared ==============================
const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
const { componentCls } = token;
-
return {
[componentCls]: {
position: 'fixed',
@@ -20,10 +24,9 @@ const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
};
};
-// ============================== Export ==============================
-export default genComponentStyleHook('Affix', token => {
- const affixToken = mergeToken<AffixToken>(token, {
- zIndexPopup: token.zIndexBase + 10,
- });
- return [genSharedAffixStyle(affixToken)];
+export const prepareComponentToken: GetDefaultToken<'Affix'> = token => ({
+ zIndexPopup: token.zIndexBase + 10,
});
+
+// ============================== Export ==============================
+export default genStyleHooks('Affix', genSharedAffixStyle, prepareComponentToken);
diff --git a/components/affix/utils.ts b/components/affix/utils.ts
index 62ce50f275..08b46ea1e2 100644
--- a/components/affix/utils.ts
+++ b/components/affix/utils.ts
@@ -9,8 +9,11 @@ export function getTargetRect(target: BindElement): DOMRect {
: ({ top: 0, bottom: window.innerHeight } as DOMRect);
}
-export function getFixedTop(placeholderRect: DOMRect, targetRect: DOMRect, offsetTop: number) {
- if (offsetTop !== undefined && targetRect.top > placeholderRect.top - offsetTop) {
+export function getFixedTop(placeholderRect: DOMRect, targetRect: DOMRect, offsetTop?: number) {
+ if (
+ offsetTop !== undefined &&
+ Math.round(targetRect.top) > Math.round(placeholderRect.top) - offsetTop
+ ) {
return `${offsetTop + targetRect.top}px`;
}
return undefined;
@@ -19,9 +22,12 @@ export function getFixedTop(placeholderRect: DOMRect, targetRect: DOMRect, offse
export function getFixedBottom(
placeholderRect: DOMRect,
targetRect: DOMRect,
- offsetBottom: number,
+ offsetBottom?: number,
) {
- if (offsetBottom !== undefined && targetRect.bottom < placeholderRect.bottom + offsetBottom) {
+ if (
+ offsetBottom !== undefined &&
+ Math.round(targetRect.bottom) < Math.round(placeholderRect.bottom) + offsetBottom
+ ) {
const targetBottomOffset = window.innerHeight - targetRect.bottom;
return `${offsetBottom + targetBottomOffset}px`;
}
@@ -29,7 +35,7 @@ export function getFixedBottom(
}
// ======================== Observer ========================
-const TRIGGER_EVENTS = [
+const TRIGGER_EVENTS: (keyof WindowEventMap)[] = [
'resize',
'scroll',
'touchstart',
From d6ec6bf26e055f58a8283b58570f03d668ee1bd1 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 11 Nov 2024 11:57:58 +0800
Subject: [PATCH 6/7] feat: anchor support cssvar
---
components/_util/getScroll.ts | 21 +++---
components/_util/scrollTo.ts | 2 +-
components/anchor/Anchor.tsx | 16 ++--
components/anchor/AnchorLink.tsx | 5 ++
components/anchor/style/index.ts | 112 ++++++++++++++++++----------
components/float-button/BackTop.tsx | 2 +-
6 files changed, 99 insertions(+), 59 deletions(-)
diff --git a/components/_util/getScroll.ts b/components/_util/getScroll.ts
index ca0b10005d..f3e42f1bc9 100644
--- a/components/_util/getScroll.ts
+++ b/components/_util/getScroll.ts
@@ -2,32 +2,31 @@ export function isWindow(obj: any): obj is Window {
return obj !== null && obj !== undefined && obj === obj.window;
}
-export default function getScroll(
- target: HTMLElement | Window | Document | null,
- top: boolean,
-): number {
+const getScroll = (target: HTMLElement | Window | Document | null): number => {
if (typeof window === 'undefined') {
return 0;
}
- const method = top ? 'scrollTop' : 'scrollLeft';
let result = 0;
if (isWindow(target)) {
- result = target[top ? 'scrollY' : 'scrollX'];
+ result = target.pageYOffset;
} else if (target instanceof Document) {
- result = target.documentElement[method];
+ result = target.documentElement.scrollTop;
} else if (target instanceof HTMLElement) {
- result = target[method];
+ result = target.scrollTop;
} else if (target) {
// According to the type inference, the `target` is `never` type.
// Since we configured the loose mode type checking, and supports mocking the target with such shape below::
// `{ documentElement: { scrollLeft: 200, scrollTop: 400 } }`,
// the program may falls into this branch.
// Check the corresponding tests for details. Don't sure what is the real scenario this happens.
- result = target[method];
+ /* biome-ignore lint/complexity/useLiteralKeys: target is a never type */ /* eslint-disable-next-line dot-notation */
+ result = target['scrollTop'];
}
if (target && !isWindow(target) && typeof result !== 'number') {
- result = ((target.ownerDocument ?? target) as any).documentElement?.[method];
+ result = (target.ownerDocument ?? (target as Document)).documentElement?.scrollTop;
}
return result;
-}
+};
+
+export default getScroll;
diff --git a/components/_util/scrollTo.ts b/components/_util/scrollTo.ts
index 992d6a930e..59bb1436a5 100644
--- a/components/_util/scrollTo.ts
+++ b/components/_util/scrollTo.ts
@@ -14,7 +14,7 @@ interface ScrollToOptions {
export default function scrollTo(y: number, options: ScrollToOptions = {}) {
const { getContainer = () => window, callback, duration = 450 } = options;
const container = getContainer();
- const scrollTop = getScroll(container, true);
+ const scrollTop = getScroll(container);
const startTime = Date.now();
const frameFunc = () => {
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 60f9e243d1..d727e3d40b 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -23,6 +23,7 @@ import AnchorLink from './AnchorLink';
import PropTypes from '../_util/vue-types';
import devWarning from '../vc-util/devWarning';
import { arrayType } from '../_util/type';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
export type AnchorDirection = 'vertical' | 'horizontal';
@@ -39,8 +40,7 @@ function getOffsetTop(element: HTMLElement, container: AnchorContainer): number
if (rect.width || rect.height) {
if (container === window) {
- container = element.ownerDocument!.documentElement!;
- return rect.top - container.clientTop;
+ return rect.top - element.ownerDocument!.documentElement!.clientTop;
}
return rect.top - (container as HTMLElement).getBoundingClientRect().top;
}
@@ -70,6 +70,7 @@ export const anchorProps = () => ({
targetOffset: Number,
items: arrayType<AnchorLinkItemProps[]>(),
direction: PropTypes.oneOf(['vertical', 'horizontal'] as AnchorDirection[]).def('vertical'),
+ replace: Boolean,
onChange: Function as PropType<(currentActiveLink: string) => void>,
onClick: Function as PropType<(e: MouseEvent, link: { title: any; href: string }) => void>,
});
@@ -91,7 +92,7 @@ export default defineComponent({
setup(props, { emit, attrs, slots, expose }) {
const { prefixCls, getTargetContainer, direction } = useConfigInject('anchor', props);
const anchorDirection = computed(() => props.direction ?? 'vertical');
-
+ const rootCls = useCSSVarCls(prefixCls);
if (process.env.NODE_ENV !== 'production') {
devWarning(
props.items && typeof slots.default !== 'function',
@@ -133,7 +134,7 @@ export default defineComponent({
const target = document.getElementById(sharpLinkMatch[1]);
if (target) {
const top = getOffsetTop(target, container);
- if (top < offsetTop + bounds) {
+ if (top <= offsetTop + bounds) {
linkSections.push({
link,
top,
@@ -170,7 +171,7 @@ export default defineComponent({
}
const container = getContainer.value();
- const scrollTop = getScroll(container, true);
+ const scrollTop = getScroll(container);
const eleOffsetTop = getOffsetTop(targetElement, container);
let y = scrollTop + eleOffsetTop;
y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
@@ -277,6 +278,7 @@ export default defineComponent({
title={title}
customTitleProps={option}
v-slots={{ customTitle: slots.customTitle }}
+ replace={props.replace}
>
{anchorDirection.value === 'vertical' ? createNestedLink(children) : null}
</AnchorLink>
@@ -284,7 +286,7 @@ export default defineComponent({
})
: null;
- const [wrapSSR, hashId] = useStyle(prefixCls);
+ const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
return () => {
const { offsetTop, affix, showInkInFixed } = props;
@@ -296,6 +298,8 @@ export default defineComponent({
const wrapperClass = classNames(hashId.value, props.wrapperClass, `${pre}-wrapper`, {
[`${pre}-wrapper-horizontal`]: anchorDirection.value === 'horizontal',
[`${pre}-rtl`]: direction.value === 'rtl',
+ [rootCls.value]: true,
+ [cssVarCls.value]: true,
});
const anchorClass = classNames(pre, {
diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx
index 5c5afa8737..c45fc7ad5c 100644
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -13,6 +13,7 @@ export const anchorLinkProps = () => ({
href: String,
title: anyType<VueNode | ((item: any) => VueNode)>(),
target: String,
+ replace: Boolean,
/* private use */
customTitleProps: objectType<AnchorLinkItemProps>(),
});
@@ -53,6 +54,10 @@ export default defineComponent({
const { href } = props;
contextHandleClick(e, { title: mergedTitle, href });
scrollTo(href);
+ if (props.replace) {
+ e.preventDefault();
+ window.location.replace(href);
+ }
};
watch(
diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts
index 119055aac8..387bf26368 100644
--- a/components/anchor/style/index.ts
+++ b/components/anchor/style/index.ts
@@ -1,21 +1,55 @@
-import type { CSSObject } from '../../_util/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { unit } from '../../_util/cssinjs';
+import {
+ FullToken,
+ GenerateStyle,
+ genStyleHooks,
+ GetDefaultToken,
+ mergeToken,
+} from '../../theme/internal';
import { resetComponent, textEllipsis } from '../../style';
-export interface ComponentToken {}
+export interface ComponentToken {
+ /**
+ * @desc 链接纵向内间距
+ * @descEN Vertical padding of link
+ */
+ linkPaddingBlock: number;
+ /**
+ * @desc 链接横向内间距
+ * @descEN Horizontal padding of link
+ */
+ linkPaddingInlineStart: number;
+}
+/**
+ * @desc Anchor 组件的 Token
+ * @descEN Token for Anchor component
+ */
interface AnchorToken extends FullToken<'Anchor'> {
+ /**
+ * @desc 容器块偏移量
+ * @descEN Holder block offset
+ */
holderOffsetBlock: number;
- anchorPaddingBlock: number;
- anchorPaddingBlockSecondary: number;
- anchorPaddingInline: number;
- anchorBallSize: number;
- anchorTitleBlock: number;
+ /**
+ * @desc 次级锚点块内间距
+ * @descEN Secondary anchor block padding
+ */
+ anchorPaddingBlockSecondary: number | string;
+ /**
+ * @desc 锚点球大小
+ * @descEN Anchor ball size
+ */
+ anchorBallSize: number | string;
+ /**
+ * @desc 锚点标题块
+ * @descEN Anchor title block
+ */
+ anchorTitleBlock: number | string;
}
// ============================== Shared ==============================
-const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
+const genSharedAnchorStyle: GenerateStyle<AnchorToken> = token => {
const {
componentCls,
holderOffsetBlock,
@@ -24,26 +58,25 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
colorPrimary,
lineType,
colorSplit,
+ calc,
} = token;
return {
[`${componentCls}-wrapper`]: {
- marginBlockStart: -holderOffsetBlock,
+ marginBlockStart: calc(holderOffsetBlock).mul(-1).equal(),
paddingBlockStart: holderOffsetBlock,
// delete overflow: auto
// overflow: 'auto',
- backgroundColor: 'transparent',
-
[componentCls]: {
...resetComponent(token),
position: 'relative',
paddingInlineStart: lineWidthBold,
[`${componentCls}-link`]: {
- paddingBlock: token.anchorPaddingBlock,
- paddingInline: `${token.anchorPaddingInline}px 0`,
+ paddingBlock: token.linkPaddingBlock,
+ paddingInline: `${unit(token.linkPaddingInlineStart)} 0`,
'&-title': {
...textEllipsis,
@@ -73,28 +106,21 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
[componentCls]: {
'&::before': {
position: 'absolute',
- left: {
- _skip_check_: true,
- value: 0,
- },
+ insetInlineStart: 0,
top: 0,
height: '100%',
- borderInlineStart: `${lineWidthBold}px ${lineType} ${colorSplit}`,
+ borderInlineStart: `${unit(lineWidthBold)} ${lineType} ${colorSplit}`,
content: '" "',
},
[`${componentCls}-ink`]: {
position: 'absolute',
- left: {
- _skip_check_: true,
- value: 0,
- },
+ insetInlineStart: 0,
display: 'none',
transform: 'translateY(-50%)',
transition: `top ${motionDurationSlow} ease-in-out`,
width: lineWidthBold,
backgroundColor: colorPrimary,
-
[`&${componentCls}-ink-visible`]: {
display: 'inline-block',
},
@@ -109,7 +135,7 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
};
};
-const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
+const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = token => {
const { componentCls, motionDurationSlow, lineWidthBold, colorPrimary } = token;
return {
@@ -127,7 +153,7 @@ const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token): CSSO
value: 0,
},
bottom: 0,
- borderBottom: `1px ${token.lineType} ${token.colorSplit}`,
+ borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
content: '" "',
},
@@ -157,17 +183,23 @@ const genSharedAnchorHorizontalStyle: GenerateStyle<AnchorToken> = (token): CSSO
};
};
-// ============================== Export ==============================
-export default genComponentStyleHook('Anchor', token => {
- const { fontSize, fontSizeLG, padding, paddingXXS } = token;
-
- const anchorToken = mergeToken<AnchorToken>(token, {
- holderOffsetBlock: paddingXXS,
- anchorPaddingBlock: paddingXXS,
- anchorPaddingBlockSecondary: paddingXXS / 2,
- anchorPaddingInline: padding,
- anchorTitleBlock: (fontSize / 14) * 3,
- anchorBallSize: fontSizeLG / 2,
- });
- return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
+export const prepareComponentToken: GetDefaultToken<'Anchor'> = token => ({
+ linkPaddingBlock: token.paddingXXS,
+ linkPaddingInlineStart: token.padding,
});
+
+// ============================== Export ==============================
+export default genStyleHooks(
+ 'Anchor',
+ token => {
+ const { fontSize, fontSizeLG, paddingXXS, calc } = token;
+ const anchorToken = mergeToken<AnchorToken>(token, {
+ holderOffsetBlock: paddingXXS,
+ anchorPaddingBlockSecondary: calc(paddingXXS).div(2).equal(),
+ anchorTitleBlock: calc(fontSize).div(14).mul(3).equal(),
+ anchorBallSize: calc(fontSizeLG).div(2).equal(),
+ });
+ return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
+ },
+ prepareComponentToken,
+);
diff --git a/components/float-button/BackTop.tsx b/components/float-button/BackTop.tsx
index 7229059752..38dbee0e72 100644
--- a/components/float-button/BackTop.tsx
+++ b/components/float-button/BackTop.tsx
@@ -60,7 +60,7 @@ const BackTop = defineComponent({
const handleScroll = throttleByAnimationFrame((e: Event | { target: any }) => {
const { visibilityHeight } = props;
- const scrollTop = getScroll(e.target, true);
+ const scrollTop = getScroll(e.target);
state.visible = scrollTop >= visibilityHeight;
});
From c9443e038bc0c2f8eff336f74097e563ab4f8509 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=9C=E5=86=BB=E6=A9=99?= <shifeng199307@gmail.com>
Date: Sun, 5 Jan 2025 16:55:25 +0800
Subject: [PATCH 7/7] feat: switch support cssvar (#7940)
---
components/switch/demo/basic.vue | 3 ++-
components/switch/demo/size.vue | 2 +-
components/switch/demo/text.vue | 4 ++--
components/switch/style/index.ts | 18 ++++++++++++------
4 files changed, 17 insertions(+), 10 deletions(-)
diff --git a/components/switch/demo/basic.vue b/components/switch/demo/basic.vue
index af7d01376c..076d7b4ea1 100644
--- a/components/switch/demo/basic.vue
+++ b/components/switch/demo/basic.vue
@@ -19,7 +19,8 @@ The most basic usage.
<template>
<a-switch v-model:checked="checked" />
</template>
+
<script lang="ts" setup>
import { ref } from 'vue';
-const checked = ref<boolean>(false);
+const checked = ref<boolean>(true);
</script>
diff --git a/components/switch/demo/size.vue b/components/switch/demo/size.vue
index 7bc9687582..145345d71b 100644
--- a/components/switch/demo/size.vue
+++ b/components/switch/demo/size.vue
@@ -27,6 +27,6 @@ title:
import { reactive } from 'vue';
const state = reactive({
checked1: true,
- checked2: false,
+ checked2: true,
});
</script>
diff --git a/components/switch/demo/text.vue b/components/switch/demo/text.vue
index e1e8a64504..5173471343 100644
--- a/components/switch/demo/text.vue
+++ b/components/switch/demo/text.vue
@@ -18,7 +18,7 @@ With text and icon.
<template>
<a-space direction="vertical">
- <a-switch v-model:checked="state.checked1" checked-children="开" un-checked-children="关" />
+ <a-switch v-model:checked="state.checked1" checked-children="开启" un-checked-children="关闭" />
<a-switch v-model:checked="state.checked2" checked-children="1" un-checked-children="0" />
<a-switch v-model:checked="state.checked3">
<template #checkedChildren><check-outlined /></template>
@@ -32,6 +32,6 @@ import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
const state = reactive({
checked1: true,
checked2: false,
- checked3: false,
+ checked3: true,
});
</script>
diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts
index b7919cede2..8cd768ea8f 100644
--- a/components/switch/style/index.ts
+++ b/components/switch/style/index.ts
@@ -10,22 +10,22 @@ export interface ComponentToken {
* @desc 开关高度
* @descEN Height of Switch
*/
- trackHeight: number;
+ trackHeight: number | string;
/**
* @desc 小号开关高度
* @descEN Height of small Switch
*/
- trackHeightSM: number;
+ trackHeightSM: number | string;
/**
* @desc 开关最小宽度
* @descEN Minimum width of Switch
*/
- trackMinWidth: number;
+ trackMinWidth: number | string;
/**
* @desc 小号开关最小宽度
* @descEN Minimum width of small Switch
*/
- trackMinWidthSM: number;
+ trackMinWidthSM: number | string;
/**
* @desc 开关内边距
* @descEN Padding of Switch
@@ -108,6 +108,11 @@ const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
[`${componentCls}-inner`]: {
paddingInlineStart: innerMaxMarginSM,
paddingInlineEnd: innerMinMarginSM,
+
+ [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
+ minHeight: trackHeightSM,
+ },
+
[`${switchInnerCls}-checked`]: {
marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
@@ -268,6 +273,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
fontSize: token.fontSizeSM,
transition: `margin-inline-start ${token.switchDuration} ease-in-out, margin-inline-end ${token.switchDuration} ease-in-out`,
pointerEvents: 'none',
+ minHeight: trackHeight,
},
[`${switchInnerCls}-checked`]: {
@@ -327,7 +333,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
boxSizing: 'border-box',
minWidth: trackMinWidth,
height: trackHeight,
- lineHeight: `${unit(trackHeight)}`,
+ lineHeight: unit(trackHeight),
verticalAlign: 'middle',
background: token.colorTextQuaternary,
border: '0',
@@ -365,7 +371,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
direction: 'rtl',
},
},
- } as CSSObject;
+ };
};
// ============================== Export ==============================