From 358905027a3212caaf94947d3d53dd14cf598058 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 26 Jun 2023 11:23:50 +0800
Subject: [PATCH] feat: move colorLink to seedToken (#43183)
* feat: move colorLink to seedToken
* feat: follow colorInfo
---
components/theme/__tests__/token.test.tsx | 60 +++++++++++++------
components/theme/interface/alias.ts | 23 +------
components/theme/interface/maps/colors.ts | 27 ++++++++-
components/theme/interface/seeds.ts | 8 +++
components/theme/themes/seed.ts | 1 +
.../theme/themes/shared/genColorMapToken.ts | 8 +++
components/theme/util/alias.ts | 4 --
7 files changed, 87 insertions(+), 44 deletions(-)
diff --git a/components/theme/__tests__/token.test.tsx b/components/theme/__tests__/token.test.tsx
index 3a2b1957e8..e5482d8eb7 100644
--- a/components/theme/__tests__/token.test.tsx
+++ b/components/theme/__tests__/token.test.tsx
@@ -10,6 +10,23 @@ import genRadius from '../themes/shared/genRadius';
const { useToken } = theme;
describe('Theme', () => {
+ const getHookToken = (config?: ThemeConfig) => {
+ let token: any;
+ const Demo = () => {
+ const { token: hookToken } = useToken();
+ token = hookToken;
+ return null;
+ };
+ render(
+
+
+ ,
+ );
+ delete token._hashId;
+ delete token._tokenKey;
+ return token;
+ };
+
it('useTheme', () => {
const { result } = renderHook(() => useToken());
@@ -224,23 +241,6 @@ describe('Theme', () => {
});
describe('getDesignToken', () => {
- const getHookToken = (config?: ThemeConfig) => {
- let token: any;
- const Demo = () => {
- const { token: hookToken } = useToken();
- token = hookToken;
- return null;
- };
- render(
-
-
- ,
- );
- delete token._hashId;
- delete token._tokenKey;
- return token;
- };
-
it('default', () => {
const token = theme.getDesignToken();
const hookToken = getHookToken();
@@ -276,4 +276,30 @@ describe('Theme', () => {
expect(token.colorPrimary).toEqual('#1668dc');
});
});
+
+ describe('colorLink', () => {
+ it('should follow colorPrimary by default', () => {
+ 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' } });
+ expect(token2.colorLink).toEqual(token2.colorInfo);
+ expect(token2.colorLinkHover).toEqual(token2.colorInfoHover);
+ expect(token2.colorLinkActive).toEqual(token2.colorInfoActive);
+
+ const 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' } });
+ expect(token.colorLink).toEqual('#189cff');
+ expect(token.colorLinkHover).toEqual('#69c8ff');
+ expect(token.colorLinkActive).toEqual('#0978d9');
+ });
+ });
});
diff --git a/components/theme/interface/alias.ts b/components/theme/interface/alias.ts
index bf6845e754..a27da4c854 100644
--- a/components/theme/interface/alias.ts
+++ b/components/theme/interface/alias.ts
@@ -119,6 +119,7 @@ export interface AliasToken extends MapToken {
* @descEN Weak action. Such as `allowClear` or Alert close button
*/
colorIcon: string;
+
/** */
/**
* @nameZH 弱操作图标悬浮态颜色
@@ -128,28 +129,6 @@ export interface AliasToken extends MapToken {
*/
colorIconHover: string;
- /**
- * @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;
-
/**
* @nameZH 高亮颜色
* @nameEN Highlight color
diff --git a/components/theme/interface/maps/colors.ts b/components/theme/interface/maps/colors.ts
index 0cbdc9d972..ee98286097 100644
--- a/components/theme/interface/maps/colors.ts
+++ b/components/theme/interface/maps/colors.ts
@@ -531,13 +531,38 @@ interface ColorErrorMapToken {
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/seeds.ts b/components/theme/interface/seeds.ts
index 8eaf6b484a..e7ac8a234d 100644
--- a/components/theme/interface/seeds.ts
+++ b/components/theme/interface/seeds.ts
@@ -63,6 +63,14 @@ export interface SeedToken extends PresetColorType {
*/
colorBgBase: string;
+ /**
+ * @nameZH 超链接颜色
+ * @nameEN Hyperlink color
+ * @desc 控制超链接的颜色。
+ * @descEN Control the color of hyperlink.
+ */
+ colorLink: string;
+
// ---------- Font ---------- //
/**
diff --git a/components/theme/themes/seed.ts b/components/theme/themes/seed.ts
index 51dd1c4529..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: '',
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/util/alias.ts b/components/theme/util/alias.ts
index bafaaa41ce..c1c231901f 100644
--- a/components/theme/util/alias.ts
+++ b/components/theme/util/alias.ts
@@ -43,10 +43,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
const aliasToken: AliasToken = {
...mergedToken,
- colorLink: mergedToken.colorInfoText,
- colorLinkHover: mergedToken.colorInfoHover,
- colorLinkActive: mergedToken.colorInfoActive,
-
// ============== Background ============== //
colorFillContent: mergedToken.colorFillSecondary,
colorFillContentHover: mergedToken.colorFill,