2023-10-13 11:54:05 +08:00
|
|
|
import React from 'react';
|
2023-06-06 17:44:30 +08:00
|
|
|
import type { Theme } from '@ant-design/cssinjs';
|
|
|
|
import { useCacheToken } from '@ant-design/cssinjs';
|
2023-10-13 11:54:05 +08:00
|
|
|
|
2023-06-06 17:44:30 +08:00
|
|
|
import version from '../version';
|
2023-07-27 11:31:38 +08:00
|
|
|
import type { DesignTokenProviderProps } from './context';
|
|
|
|
import { defaultTheme, DesignTokenContext } from './context';
|
2023-10-13 11:54:05 +08:00
|
|
|
import type { AliasToken, GlobalToken, MapToken, SeedToken } from './interface';
|
2023-06-06 17:44:30 +08:00
|
|
|
import defaultSeedToken from './themes/seed';
|
|
|
|
import formatToken from './util/alias';
|
|
|
|
|
2023-11-06 10:31:51 +08:00
|
|
|
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,
|
|
|
|
};
|
|
|
|
|
2023-11-21 15:26:41 +08:00
|
|
|
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,
|
|
|
|
};
|
|
|
|
|
2023-07-27 11:31:38 +08:00
|
|
|
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;
|
|
|
|
};
|
|
|
|
|
2023-06-06 17:44:30 +08:00
|
|
|
// ================================== Hook ==================================
|
2023-08-04 11:22:33 +08:00
|
|
|
export default function useToken(): [
|
|
|
|
theme: Theme<SeedToken, MapToken>,
|
|
|
|
token: GlobalToken,
|
|
|
|
hashId: string,
|
2023-11-06 10:31:51 +08:00
|
|
|
realToken: GlobalToken,
|
|
|
|
cssVar?: DesignTokenProviderProps['cssVar'],
|
2023-08-04 11:22:33 +08:00
|
|
|
] {
|
2023-11-06 10:31:51 +08:00
|
|
|
const {
|
|
|
|
token: rootDesignToken,
|
|
|
|
hashed,
|
|
|
|
theme,
|
|
|
|
override,
|
|
|
|
cssVar,
|
|
|
|
} = React.useContext(DesignTokenContext);
|
2023-06-06 17:44:30 +08:00
|
|
|
|
|
|
|
const salt = `${version}-${hashed || ''}`;
|
|
|
|
|
|
|
|
const mergedTheme = theme || defaultTheme;
|
|
|
|
|
2023-11-06 10:31:51 +08:00
|
|
|
const [token, hashId, realToken] = useCacheToken<GlobalToken, SeedToken>(
|
2023-06-06 17:44:30 +08:00
|
|
|
mergedTheme,
|
|
|
|
[defaultSeedToken, rootDesignToken],
|
|
|
|
{
|
|
|
|
salt,
|
2023-10-13 11:54:05 +08:00
|
|
|
override,
|
2023-07-27 11:31:38 +08:00
|
|
|
getComputedToken,
|
2023-08-08 10:37:40 +08:00
|
|
|
// 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,
|
2023-11-06 10:31:51 +08:00
|
|
|
cssVar: cssVar && {
|
|
|
|
prefix: cssVar.prefix,
|
|
|
|
key: cssVar.key,
|
|
|
|
unitless,
|
|
|
|
ignore,
|
2023-11-21 15:26:41 +08:00
|
|
|
preserve,
|
2023-11-06 10:31:51 +08:00
|
|
|
},
|
2023-06-06 17:44:30 +08:00
|
|
|
},
|
|
|
|
);
|
|
|
|
|
2023-11-08 14:56:15 +08:00
|
|
|
return [mergedTheme, realToken, hashed ? hashId : '', token, cssVar];
|
2023-06-06 17:44:30 +08:00
|
|
|
}
|