feat: generate anchor style for all components (#36460)

* test: fix lint

* chore: code clean

* doc: anchor color

* chore: style order

components/alert/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 

components/anchor/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 

components/avatar/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 

components/back-top/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/badge/style/index.tsx

@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle, PresetColorType } from '../../theme';
-import { genComponentStyleHook, mergeToken, PresetColors, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface BadgeToken extends FullToken<'Badge'> {
   badgeFontHeight: number;

components/breadcrumb/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
   breadcrumbBaseColor: string;

components/calendar/style/index.tsx

@@ -1,10 +1,11 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import type { PickerPanelToken } from '../../date-picker/style';
 import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style';
 import type { InputToken } from '../../input/style';
 import { initInputToken } from '../../input/style';
 import type { FullToken } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 
 export interface ComponentToken {
   yearControlWidth: number;

components/card/style/index.tsx

@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle } from '../../theme';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { clearFix, resetComponent } from '../../style';
 
 interface CardToken extends FullToken<'Card'> {
   cardShadow: string;

components/carousel/style/index.tsx

@@ -1,5 +1,6 @@
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   dotWidth: number;

components/checkbox/style/index.tsx

@@ -1,6 +1,7 @@
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 

components/collapse/style/index.tsx

@@ -1,5 +1,6 @@
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent, resetIcon } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent, resetIcon } from '../../style';
 
 type CollapseToken = FullToken<'Collapse'> & {
   collapseContentBg: string;

components/date-picker/style/index.tsx

@@ -9,9 +9,10 @@ import {
 } from '../../input/style';
 import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent, roundedArrow } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import type { GlobalToken } from '../../theme/interface';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
+import { resetComponent, roundedArrow } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/descriptions/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface DescriptionsToken extends FullToken<'Descriptions'> {
   descriptionsTitleMarginBottom: number;

components/divider/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/dropdown/style/index.tsx

@@ -7,9 +7,10 @@ import {
   slideUpOut,
 } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent, roundedArrow } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genButtonStyle from './button';
 import genStatusStyle from './status';
+import { resetComponent, roundedArrow } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/form/style/index.tsx

@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface FormToken extends FullToken<'Form'> {
   formItemCls: string;

components/image/style/index.tsx

@@ -3,7 +3,8 @@ import { TinyColor } from '@ctrl/tinycolor';
 import { genModalMaskStyle } from '../../modal/style';
 import { initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/input-number/style/index.tsx

@@ -10,7 +10,8 @@ import {
   initInputToken,
 } from '../../input/style';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, resetComponent, resetIcon } from '../../theme';
+import { genComponentStyleHook } from '../../theme';
+import { resetComponent, resetIcon } from '../../style';
 
 export interface ComponentToken {
   controlWidth: number;

components/input/style/index.tsx

@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import type { GlobalToken } from '../../theme/interface';
+import { clearFix, resetComponent } from '../../style';
 
 export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
   inputAffixPadding: number;

components/list/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   contentWidth: number;

components/mentions/style/index.tsx

@@ -8,7 +8,8 @@ import {
   initInputToken,
 } from '../../input/style';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, resetComponent } from '../../theme';
+import { genComponentStyleHook } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/menu/style/index.tsx

@@ -1,16 +1,11 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme';
-import {
+import { genComponentStyleHook, mergeToken } from '../../theme';
-  clearFix,
-  genComponentStyleHook,
-  mergeToken,
-  resetComponent,
-  resetIcon,
-} from '../../theme';
 import getHorizontalStyle from './horizontal';
 import getRTLStyle from './rtl';
 import getThemeStyle from './theme';
 import getVerticalStyle from './vertical';
+import { clearFix, resetComponent, resetIcon } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/message/style/index.tsx

@@ -1,7 +1,8 @@
 // deps-lint-skip-all
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/modal/style/index.tsx

@@ -1,8 +1,9 @@
 import type React from 'react';
 import { initFadeMotion, initZoomMotion } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
+import { clearFix, resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/notification/style/index.tsx

@@ -1,7 +1,8 @@
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genNotificationPlacementStyle from './placement';
+import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/pagination/style/index.tsx

@@ -6,7 +6,8 @@ import {
   type InputToken,
 } from '../../input/style';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
   paginationItemSize: number;

components/popover/style/index.tsx

@@ -1,12 +1,8 @@
 import { initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, PresetColorType } from '../../theme';
-import {
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
-  genComponentStyleHook,
+import { resetComponent } from '../../style';
-  getArrowStyle,
+import getArrowStyle from '../../style/placementArrow';
-  mergeToken,
-  PresetColors,
-  resetComponent,
-} from '../../theme';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/progress/style/index.tsx

@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 

components/radio/style/index.tsx

@@ -1,6 +1,7 @@
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 // ============================== Tokens ==============================
 export interface ComponentToken {}

components/rate/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export type ComponentToken = {};
 

components/segmented/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   // FIXME: need to be removed

components/select/style/dropdown.tsx

@@ -9,7 +9,7 @@ import {
   slideUpOut,
 } from '../../style/motion';
 import type { GenerateStyle } from '../../theme';
-import { resetComponent } from '../../theme';
+import { resetComponent } from '../../style';
 
 const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
   const { controlPaddingHorizontal } = token;

components/select/style/index.tsx

@@ -1,9 +1,10 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent, resetIcon } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genDropdownStyle from './dropdown';
 import genMultipleStyle from './multiple';
 import genSingleStyle from './single';
+import { resetComponent, resetIcon } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/select/style/multiple.tsx

@@ -1,6 +1,7 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import type { SelectToken } from '.';
-import { mergeToken, resetIcon } from '../../theme';
+import { mergeToken } from '../../theme';
+import { resetIcon } from '../../style';
 
 const FIXED_ITEM_MARGIN = 2;
 

components/slider/style/index.tsx

@@ -2,7 +2,8 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import type * as React from 'react';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 // Direction naming standard:
 // Horizontal base:

components/spin/style/index.tsx

@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   contentHeight: number;

components/statistic/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface StatisticToken extends FullToken<'Statistic'> {
   statisticTitleFontSize: number;

components/steps/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genStepsCustomIconStyle from './custom-icon';
 import genStepsLabelPlacementStyle from './label-placement';
 import genStepsNavStyle from './nav';
@@ -9,6 +9,7 @@ import genStepsProgressDotStyle from './progress-dot';
 import genStepsRTLStyle from './rtl';
 import genStepsSmallStyle from './small';
 import genStepsVerticalStyle from './vertical';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   descriptionWidth: number;

components/style/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '..';
+import type { DerivativeToken } from '../theme';
 
 export { operationUnit } from './operationUnit';
 export { roundedArrow } from './roundedArrow';
@@ -15,9 +15,6 @@ export const resetComponent = (token: DerivativeToken): CSSObject => ({
   lineHeight: token.lineHeight,
   listStyle: 'none',
   // font-feature-settings: @font-feature-settings-base;
-  a: {
-    textDecoration: 'none',
-  },
 });
 
 export const resetIcon = (): CSSObject => ({
@@ -61,3 +58,40 @@ export const clearFix = (): CSSObject => ({
     content: '""',
   },
 });
+
+export const genLinkStyle = (token: DerivativeToken): CSSObject => ({
+  a: {
+    color: token.colorLink,
+    textDecoration: token.linkDecoration,
+    backgroundColor: 'transparent', // remove the gray background on active links in IE 10.
+    outline: 'none',
+    cursor: 'pointer',
+    transition: `color ${token.motionDurationSlow}`,
+    '-webkit-text-decoration-skip': 'objects', // remove gaps in links underline in iOS 8+ and Safari 8+.
+
+    '&:hover': {
+      color: token.colorLinkHover,
+    },
+
+    '&:active': {
+      color: token.colorLinkActive,
+    },
+
+    [`&:active,
+  &:hover`]: {
+      textDecoration: token.linkHoverDecoration,
+      outline: 0,
+    },
+
+    // https://github.com/ant-design/ant-design/issues/22503
+    '&:focus': {
+      textDecoration: token.linkFocusDecoration,
+      outline: 0,
+    },
+
+    '&[disabled]': {
+      color: token.colorTextDisabled,
+      cursor: 'not-allowed',
+    },
+  },
+});

components/style/operationUnit.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '..';
+import type { DerivativeToken } from '../theme';
 
 // eslint-disable-next-line import/prefer-default-export
 export const operationUnit = (token: DerivativeToken): CSSObject => ({

components/style/placementArrow.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
-import type { AliasToken } from '../interface';
+import type { AliasToken } from '../theme';
-import type { TokenWithCommonCls } from './genComponentStyleHook';
+import type { TokenWithCommonCls } from '../theme/util/genComponentStyleHook';
 import { roundedArrow } from './roundedArrow';
 
 function connectArrowCls(classList: string[], showArrowCls: string = '') {

components/style/roundedArrow.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
-import seedToken from '../themes/seed';
 
 export const roundedArrow = (width: number, outerRadius: number, bgColor: string): CSSObject => {
   const cornerHeight = outerRadius * (1 - 1 / Math.sqrt(2));
-  const { radiusBase } = seedToken;
+  const radiusBase = 2;
 
   const ax = width - cornerHeight;
   const ay = 2 * width + cornerHeight;

components/switch/style/index.tsx

@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface SwitchToken extends FullToken<'Switch'> {
   switchMinWidth: number;

components/table/style/expand.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme';
-import { operationUnit } from '../../theme';
 import type { TableToken } from './index';
+import { operationUnit } from '../../style';
 
 const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
   const {

components/table/style/filter.tsx

@@ -1,9 +1,8 @@
-import type { CSSInterpolation } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme';
-import { resetComponent } from '../../theme';
 import type { TableToken } from './index';
+import { resetComponent } from '../../style';
 
-const genFilterStyle: GenerateStyle<TableToken, CSSInterpolation> = token => {
+const genFilterStyle: GenerateStyle<TableToken> = token => {
   const {
     componentCls,
     antCls,

components/table/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genBorderedStyle from './bordered';
 import genEllipsisStyle from './ellipsis';
 import genEmptyStyle from './empty';
@@ -16,6 +16,7 @@ import genSizeStyle from './size';
 import genSorterStyle from './sorter';
 import genStickyStyle from './sticky';
 import genSummaryStyle from './summary';
+import { clearFix, resetComponent } from '../../style';
 
 export interface ComponentToken {}
 

components/tabs/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/tag/style/index.tsx

@@ -1,7 +1,9 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import type React from 'react';
 import type { FullToken, PresetColorType } from '../../theme';
-import { genComponentStyleHook, mergeToken, PresetColors, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
 import capitalize from '../../_util/capitalize';
+import { resetComponent } from '../../style';
 
 interface TagToken extends FullToken<'Tag'> {
   tagFontSize: number;

components/theme/index.tsx

@@ -13,22 +13,14 @@ import type {
 import { PresetColors } from './interface';
 import defaultDerivative from './themes/default';
 import defaultSeedToken from './themes/seed';
-import { clearFix, operationUnit, resetComponent, resetIcon, roundedArrow } from './util';
 import formatToken from './util/alias';
 import type { FullToken } from './util/genComponentStyleHook';
 import genComponentStyleHook from './util/genComponentStyleHook';
-import getArrowStyle from './util/placementArrow';
 import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
 
 const defaultTheme = createTheme(defaultDerivative);
 
 export {
-  resetComponent,
-  resetIcon,
-  clearFix,
-  roundedArrow,
-  getArrowStyle,
-  operationUnit,
   // colors
   PresetColors,
   // Statistic

components/theme/util/genComponentStyleHook.ts

@@ -2,6 +2,7 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { useContext } from 'react';
+import { genLinkStyle } from '../../style';
 import { ConfigContext } from '../../config-provider/context';
 import type { UseComponentStyleResult } from '../index';
 import { mergeToken, statisticToken, useToken } from '../index';
@@ -74,12 +75,14 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
             mergedComponentToken[key] = overrideComponentToken[key] ?? mergedComponentToken[key];
           });
         }
+
+        const componentCls = `.${prefixCls}`;
         const mergedToken = mergeToken<
           TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
         >(
           proxyToken,
           {
-            componentCls: `.${prefixCls}`,
+            componentCls,
             prefixCls,
             iconCls: `.${iconPrefixCls}`,
             antCls: `.${rootPrefixCls}`,
@@ -94,7 +97,11 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           iconPrefixCls,
         });
         flush(component, mergedComponentToken);
-        return styleInterpolation;
+        return [
+          // Generate style for all a tags in antd component
+          { [componentCls]: genLinkStyle(token) },
+          styleInterpolation,
+        ];
       }),
       hashId,
     ];

components/timeline/style/index.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 

components/tooltip/style/index.tsx

@@ -6,13 +6,9 @@ import type {
   PresetColorType,
   UseComponentStyleResult,
 } from '../../theme';
-import {
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
-  genComponentStyleHook,
+import { resetComponent } from '../../style';
-  getArrowStyle,
+import getArrowStyle from '../../style/placementArrow';
-  mergeToken,
-  PresetColors,
-  resetComponent,
-} from '../../theme';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/transfer/style/index.tsx

@@ -1,13 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle } from '../../theme';
-import {
+import { genComponentStyleHook, mergeToken } from '../../theme';
-  genComponentStyleHook,
+import { operationUnit, resetComponent, resetIcon } from '../../style';
-  mergeToken,
-  operationUnit,
-  resetComponent,
-  resetIcon,
-} from '../../theme';
 
 export interface ComponentToken {
   listWidth: number;

components/tree/style/index.tsx

@@ -6,7 +6,8 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import type { DerivativeToken } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 // ============================ Keyframes =============================
 const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {

components/typography/style/index.tsx

@@ -1,5 +1,5 @@
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, operationUnit } from '../../theme';
+import { genComponentStyleHook } from '../../theme';
 import {
   getCopiableStyles,
   getEditableStyles,
@@ -8,6 +8,7 @@ import {
   getResetStyles,
   getTitleStyles,
 } from './mixins';
+import { operationUnit } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {

components/typography/style/mixins.tsx

@@ -12,7 +12,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import type { TypographyToken } from '.';
 import { initInputToken } from '../../input/style';
 import type { GenerateStyle } from '../../theme';
-import { operationUnit } from '../../theme';
+import { operationUnit } from '../../style';
 
 // eslint-disable-next-line import/prefer-default-export
 const getTitleStyle = (

components/upload/style/index.tsx

@@ -1,10 +1,11 @@
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genDraggerStyle from './dragger';
 import genListStyle from './list';
 import genMotionStyle from './motion';
 import { genPictureCardStyle, genPictureStyle } from './picture';
 import genRtlStyle from './rtl';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 

components/upload/style/list.tsx

@@ -1,6 +1,6 @@
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme';
-import { clearFix } from '../../theme';
+import { clearFix } from '../../style';
 
 const genListStyle: GenerateStyle<UploadToken> = token => {
   const { componentCls, antCls, iconCls, fontSizeBase, lineHeight } = token;

components/upload/style/picture.tsx

@@ -1,7 +1,7 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme';
-import { clearFix } from '../../theme';
+import { clearFix } from '../../style';
 
 const genPictureStyle: GenerateStyle<UploadToken> = token => {
   const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset } = token;

site/theme/static/demo.less

@@ -19,7 +19,7 @@
   .code-box-title {
     &,
     a {
-      color: @site-text-color;
+      color: @site-text-color !important;
       background: @component-background;
     }
   }

site/theme/static/toc.less

@@ -43,7 +43,7 @@ ul.toc > li {
   margin-left: -1px;
   padding-left: 16px;
   overflow: hidden;
-  color: @site-text-color;
+  color: @site-text-color !important;
   white-space: nowrap;
   text-overflow: ellipsis;
   border-left: 1px solid transparent;
@@ -60,11 +60,11 @@ ul.toc > li {
 }
 
 .toc a:hover {
-  color: @primary-color;
+  color: @primary-color !important;
 }
 
 .toc a.current {
-  color: @primary-color;
+  color: @primary-color !important;
   border-color: @primary-color;
 }
 

site/theme/template/Layout/Header/Github.less

@@ -26,6 +26,7 @@
   .gh-count {
     height: auto;
     padding: 4px 8px;
+    color: #000;
     font-weight: normal;
     background: #fff;