Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit db740c8

Browse files
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.
1 parent 7ce0f11 commit db740c8

File tree

113 files changed

+7512
-324
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+7512
-324
lines changed

‎components/_theme/context.ts

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import type { ShallowRef, InjectionKey, ExtractPropTypes, ComputedRef } from 'vue';
2+
import {
3+
defineComponent,
4+
inject,
5+
provide,
6+
shallowRef,
7+
unref,
8+
triggerRef,
9+
watch,
10+
computed,
11+
} from 'vue';
12+
import type { Theme } from '../_util/_cssinjs';
13+
import { createTheme } from '../_util/_cssinjs';
14+
15+
import { objectType, someType } from '../_util/type';
16+
import type { AliasToken, MapToken, OverrideToken, SeedToken } from './interface';
17+
import defaultDerivative from './themes/default';
18+
import defaultSeedToken from './themes/seed';
19+
20+
export const defaultTheme = createTheme(defaultDerivative);
21+
22+
// ================================ Context =================================
23+
// To ensure snapshot stable. We disable hashed in test env.
24+
const DesignTokenContextKey: InjectionKey<ShallowRef<Partial<DesignTokenProviderProps>>> =
25+
Symbol('DesignTokenContextKey');
26+
27+
export const globalDesignTokenApi = shallowRef<DesignTokenProviderProps>();
28+
29+
export const defaultConfig = {
30+
token: defaultSeedToken,
31+
override: { override: defaultSeedToken },
32+
hashed: true,
33+
};
34+
35+
export type ComponentsToken = {
36+
[key in keyof OverrideToken]?: OverrideToken[key] & {
37+
theme?: Theme<SeedToken, MapToken>;
38+
};
39+
};
40+
export const styleProviderProps = () => ({
41+
token: objectType<AliasToken>(),
42+
theme: objectType<Theme<SeedToken, MapToken>>(),
43+
components: objectType<ComponentsToken>(),
44+
/** Just merge `token` & `override` at top to save perf */
45+
override: objectType<{ override: Partial<AliasToken> } & ComponentsToken>(),
46+
hashed: someType<string | boolean>(),
47+
cssVar: someType<{
48+
prefix?: string;
49+
key?: string;
50+
}>(),
51+
});
52+
53+
export type StyleProviderProps = Partial<ExtractPropTypes<ReturnType<typeof styleProviderProps>>>;
54+
export interface DesignTokenProviderProps {
55+
token: Partial<AliasToken>;
56+
theme?: Theme<SeedToken, MapToken>;
57+
components?: ComponentsToken;
58+
/** Just merge `token` & `override` at top to save perf */
59+
override?: { override: Partial<AliasToken> } & ComponentsToken;
60+
hashed?: string | boolean;
61+
cssVar?: {
62+
prefix?: string;
63+
key?: string;
64+
};
65+
}
66+
67+
export const useDesignTokenInject = () => {
68+
return inject(
69+
DesignTokenContextKey,
70+
computed(() => globalDesignTokenApi.value || defaultConfig),
71+
);
72+
};
73+
74+
export const useDesignTokenProvider = (props: ComputedRef<DesignTokenProviderProps>) => {
75+
const parentContext = useDesignTokenInject();
76+
const context = shallowRef<Partial<DesignTokenProviderProps>>(defaultConfig);
77+
watch(
78+
computed(() => [props.value, parentContext.value]),
79+
([propsValue, parentContextValue]) => {
80+
const mergedContext: Partial<DesignTokenProviderProps> = {
81+
...parentContextValue,
82+
};
83+
Object.keys(propsValue).forEach(key => {
84+
const value = propsValue[key];
85+
if (propsValue[key] !== undefined) {
86+
mergedContext[key] = value;
87+
}
88+
});
89+
90+
context.value = mergedContext;
91+
globalDesignTokenApi.value = unref(mergedContext as any);
92+
triggerRef(globalDesignTokenApi);
93+
},
94+
{ immediate: true, deep: true },
95+
);
96+
provide(DesignTokenContextKey, context);
97+
return context;
98+
};
99+
100+
export const DesignTokenProvider = defineComponent({
101+
props: {
102+
value: objectType<DesignTokenProviderProps>(),
103+
},
104+
setup(props, { slots }) {
105+
useDesignTokenProvider(computed(() => props.value));
106+
return () => {
107+
return slots.default?.();
108+
};
109+
},
110+
});
111+
112+
export default { useDesignTokenInject, useDesignTokenProvider, DesignTokenProvider };

‎components/_theme/getDesignToken.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { createTheme, getComputedToken } from '../_util/_cssinjs';
2+
import type { ThemeConfig } from '../config-provider/context';
3+
import type { AliasToken } from './interface';
4+
import defaultDerivative from './themes/default';
5+
import seedToken from './themes/seed';
6+
import formatToken from './util/alias';
7+
8+
const getDesignToken = (config?: ThemeConfig): AliasToken => {
9+
const theme = config?.algorithm ? createTheme(config.algorithm) : createTheme(defaultDerivative);
10+
const mergedToken = {
11+
...seedToken,
12+
...config?.token,
13+
};
14+
return getComputedToken(mergedToken, { override: config?.token }, theme, formatToken);
15+
};
16+
17+
export default getDesignToken;

‎components/_theme/index.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* eslint-disable import/prefer-default-export */
2+
import getDesignToken from './getDesignToken';
3+
import type { GlobalToken, MappingAlgorithm } from './interface';
4+
import { defaultConfig, useToken as useInternalToken } from './internal';
5+
import compactAlgorithm from './themes/compact';
6+
import darkAlgorithm from './themes/dark';
7+
import defaultAlgorithm from './themes/default';
8+
9+
// ZombieJ: We export as object to user but array in internal.
10+
// This is used to minimize the bundle size for antd package but safe to refactor as object also.
11+
// Please do not export internal `useToken` directly to avoid something export unexpected.
12+
/** Get current context Design Token. Will be different if you are using nest theme config. */
13+
function useToken() {
14+
const [theme, token, hashId] = useInternalToken();
15+
16+
return { theme, token, hashId };
17+
}
18+
19+
export type { GlobalToken, MappingAlgorithm };
20+
21+
export default {
22+
/** @private Test Usage. Do not use in production. */
23+
defaultConfig,
24+
25+
/** Default seedToken */
26+
defaultSeed: defaultConfig.token,
27+
28+
useToken,
29+
defaultAlgorithm,
30+
darkAlgorithm,
31+
compactAlgorithm,
32+
getDesignToken,
33+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /