import React from 'react'; import type { Theme } from '@ant-design/cssinjs'; import { useCacheToken } from '@ant-design/cssinjs'; import version from '../version'; import type { DesignTokenProviderProps } from './context'; import { defaultTheme, DesignTokenContext } from './context'; import type { AliasToken, GlobalToken, MapToken, SeedToken } from './interface'; import defaultSeedToken from './themes/seed'; import formatToken from './util/alias'; 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, }; export const getComputedToken = ( originToken: SeedToken, overrideToken: DesignTokenProviderProps['components'] & { override?: Partial; }, theme: Theme, ) => { 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(): [ theme: Theme, token: GlobalToken, hashId: string, realToken: GlobalToken, cssVar?: DesignTokenProviderProps['cssVar'], ] { const { token: rootDesignToken, hashed, theme, override, cssVar, } = React.useContext(DesignTokenContext); const salt = `${version}-${hashed || ''}`; const mergedTheme = theme || defaultTheme; const [token, hashId, realToken] = useCacheToken( mergedTheme, [defaultSeedToken, rootDesignToken], { salt, 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: cssVar && { prefix: cssVar.prefix, key: cssVar.key, unitless, ignore, preserve, }, }, ); return [mergedTheme, realToken, hashed ? hashId : '', token, cssVar]; }