feat: move colorLink to seedToken (#43183)

* feat: move colorLink to seedToken

* feat: follow colorInfo

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(
+      <ConfigProvider theme={config}>
+        <Demo />
+      </ConfigProvider>,
+    );
+    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(
-        <ConfigProvider theme={config}>
-          <Demo />
-        </ConfigProvider>,
-      );
-      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');
+    });
+  });
 });

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

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 不随主题变化的纯白色

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   ---------- //
 
   /**

components/theme/themes/seed.ts

@@ -26,6 +26,7 @@ const seedToken: SeedToken = {
   colorWarning: '#faad14',
   colorError: '#ff4d4f',
   colorInfo: '#1677ff',
+  colorLink: '',
   colorTextBase: '',
 
   colorBgBase: '',

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',
   };

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,