source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: return cssVar in useToken (#53195)

Browse Source
This commit is contained in:
MadCcc
2025-03-18 14:07:07 +08:00
committed by GitHub
parent 7729de3740
commit f0ed87ff0c
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/theme/__tests__/token.test.tsx
View File

@@ -14,9 +14,9 @@ const { useToken } = theme;
describe('Theme', () => {
const getHookToken = (config?: ThemeConfig) => {
let token: any;
let cssVar: any;
const Demo = () => {
const { token: hookToken } = useToken();
token = hookToken;
({ token, cssVar } = useToken());
return null;
};
render(
@@ -27,7 +27,7 @@ describe('Theme', () => {
delete token._hashId;
delete token._tokenKey;
delete token._themeKey;
return token;
return { token, cssVar };
};
it('useTheme', () => {
@@ -250,7 +250,7 @@ describe('Theme', () => {
describe('getDesignToken', () => {
it('default', () => {
const token = theme.getDesignToken();
const hookToken = getHookToken();
const { token: hookToken } = getHookToken();
expect(token).toEqual(hookToken);
});
@@ -263,7 +263,7 @@ describe('Theme', () => {
},
};
const token = theme.getDesignToken(config);
const hookToken = getHookToken(config);
const { token: hookToken } = getHookToken(config);
expect(token).toEqual(hookToken);
expect(token.colorPrimary).toEqual('#189cff');
});
@@ -278,7 +278,7 @@ describe('Theme', () => {
algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
};
const token = theme.getDesignToken(config);
const hookToken = getHookToken(config);
const { token: hookToken } = getHookToken(config);
expect(token).toEqual(hookToken);
expect(token.colorPrimary).toEqual('#1668dc');
});
@@ -286,26 +286,26 @@ describe('Theme', () => {
describe('colorLink', () => {
it('should follow colorPrimary by default', () => {
const token = getHookToken();
const { token } = getHookToken();
expect(token.colorLink).toEqual(token.colorInfo);
expect(token.colorLinkHover).toEqual(token.colorInfoHover);
expect(token.colorLinkActive).toEqual(token.colorInfoActive);
const token2 = getHookToken({ token: { colorPrimary: '#189cff' } });
const { token: token2 } = getHookToken({ token: { colorPrimary: '#189cff' } });
expect(token2.colorLink).toEqual(token2.colorInfo);
expect(token2.colorLinkHover).toEqual(token2.colorInfoHover);
expect(token2.colorLinkActive).toEqual(token2.colorInfoActive);
// colorInfo should not follow colorPrimary
expect(token2.colorLink).not.toEqual('#189cff');
const token3 = getHookToken({ algorithm: [theme.darkAlgorithm] });
const { token: token3 } = getHookToken({ algorithm: [theme.darkAlgorithm] });
expect(token3.colorLink).toEqual(token3.colorInfo);
expect(token3.colorLinkHover).toEqual(token3.colorInfoHover);
expect(token3.colorLinkActive).toEqual(token3.colorInfoActive);
});
it('should be calculated correctly', () => {
const token = getHookToken({ token: { colorLink: '#189cff' } });
const { token } = getHookToken({ token: { colorLink: '#189cff' } });
expect(token.colorLink).toEqual('#189cff');
expect(token.colorLinkHover).toEqual('#69c8ff');
expect(token.colorLinkActive).toEqual('#0978d9');
@@ -343,4 +343,11 @@ describe('Theme', () => {
'--ant-input-hover-border-color': '#1fb572',
});
});
it('get cssVar from useToken', () => {
const { cssVar } = getHookToken();
expect(cssVar.colorLink).toEqual('var(--ant-color-link)');
expect(cssVar.colorLinkHover).toEqual('var(--ant-color-link-hover)');
expect(cssVar.colorLinkActive).toEqual('var(--ant-color-link-active)');
});
});

4
components/theme/index.tsx
View File

@@ -14,9 +14,9 @@ import defaultAlgorithm from './themes/default';
// 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();
const [theme, token, hashId, cssVar] = useInternalToken();
return { theme, token, hashId };
return { theme, token, hashId, cssVar };
}
export type { GlobalToken, MappingAlgorithm };