@antsoo-lib/components 0.1.2 → 0.1.4

package/src/theme/themes/seed.ts

@@ -0,0 +1,79 @@
+import type { PresetColorType, SeedToken } from '../internal'
+
+const currPrimaryColor = localStorage.getItem('VXE_DOCS_PRIMARY_COLOR') || '#00B394'
+
+export const defaultPresetColors: PresetColorType = {
+  blue: currPrimaryColor,
+  purple: '#722ED1',
+  cyan: '#13C2C2',
+  green: '#52C41A',
+  magenta: '#EB2F96',
+  pink: '#eb2f96',
+  red: '#F5222D',
+  orange: '#FA8C16',
+  yellow: '#FADB14',
+  volcano: '#FA541C',
+  geekblue: '#2F54EB',
+  gold: '#FAAD14',
+  lime: '#A0D911',
+}
+
+const seedToken: SeedToken = {
+  // preset color palettes
+  ...defaultPresetColors,
+
+  // Color
+  colorPrimary: currPrimaryColor,
+  colorSub: '#00A68A',
+  colorSuccess: '#52c41a',
+  colorWarning: '#faad14',
+  colorError: '#ff4d4f',
+  colorInfo: currPrimaryColor,
+  colorTextBase: '',
+
+  colorBgBase: '',
+  colorBgSub: '#D9F5F0',
+  // Font
+  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+'Noto Color Emoji'`,
+  fontSize: 14,
+
+  // Line
+  lineWidth: 1,
+  lineType: 'solid',
+
+  // Motion
+  motionUnit: 0.1,
+  motionBase: 0,
+  motionEaseOutCirc: 'cubic-bezier(0.08, 0.82, 0.17, 1)',
+  motionEaseInOutCirc: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
+  motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+  motionEaseInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+  motionEaseOutBack: 'cubic-bezier(0.12, 0.4, 0.29, 1.46)',
+  motionEaseInBack: 'cubic-bezier(0.71, -0.46, 0.88, 0.6)',
+  motionEaseInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+  motionEaseOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',
+
+  // Radius
+  borderRadius: 4,
+
+  // Size
+  sizeUnit: 4,
+  sizeStep: 4,
+  sizePopupArrow: 16,
+
+  // Control Base
+  controlHeight: 32,
+
+  // zIndex
+  zIndexBase: 0,
+  zIndexPopupBase: 1000,
+
+  // Image
+  opacityImage: 1,
+
+  // Wireframe
+  wireframe: false,
+}
+export default seedToken

package/src/theme/themes/shared/genColorMapToken.ts

@@ -0,0 +1,93 @@
+import { TinyColor } from '@ctrl/tinycolor'
+
+import type { ColorMapToken, SeedToken } from '../../interface'
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap'
+
+interface PaletteGenerators {
+  generateColorPalettes: GenerateColorMap
+  generateNeutralColorPalettes: GenerateNeutralColorMap
+}
+
+export default function genColorMapToken(
+  seed: SeedToken,
+  { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators,
+): ColorMapToken {
+  const {
+    colorSuccess: colorSuccessBase,
+    colorWarning: colorWarningBase,
+    colorError: colorErrorBase,
+    colorInfo: colorInfoBase,
+    colorPrimary: colorPrimaryBase,
+    colorBgBase,
+    colorTextBase,
+  } = seed
+
+  const primaryColors = generateColorPalettes(colorPrimaryBase)
+  const successColors = generateColorPalettes(colorSuccessBase)
+  const warningColors = generateColorPalettes(colorWarningBase)
+  const errorColors = generateColorPalettes(colorErrorBase)
+  const infoColors = generateColorPalettes(colorInfoBase)
+  const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase)
+
+  return {
+    ...neutralColors,
+
+    colorPrimaryBg: primaryColors[1],
+    colorPrimaryBgHover: primaryColors[2],
+    colorPrimaryBorder: primaryColors[3],
+    colorPrimaryBorderHover: primaryColors[4],
+    colorPrimaryHover: primaryColors[5],
+    colorPrimary: primaryColors[6],
+    colorPrimaryActive: primaryColors[7],
+    colorPrimaryTextHover: primaryColors[8],
+    colorPrimaryText: primaryColors[9],
+    colorPrimaryTextActive: primaryColors[10],
+
+    colorSuccessBg: successColors[1],
+    colorSuccessBgHover: successColors[2],
+    colorSuccessBorder: successColors[3],
+    colorSuccessBorderHover: successColors[4],
+    colorSuccessHover: successColors[4],
+    colorSuccess: successColors[6],
+    colorSuccessActive: successColors[7],
+    colorSuccessTextHover: successColors[8],
+    colorSuccessText: successColors[9],
+    colorSuccessTextActive: successColors[10],
+
+    colorErrorBg: errorColors[1],
+    colorErrorBgHover: errorColors[2],
+    colorErrorBorder: errorColors[3],
+    colorErrorBorderHover: errorColors[4],
+    colorErrorHover: errorColors[5],
+    colorError: errorColors[6],
+    colorErrorActive: errorColors[7],
+    colorErrorTextHover: errorColors[8],
+    colorErrorText: errorColors[9],
+    colorErrorTextActive: errorColors[10],
+
+    colorWarningBg: warningColors[1],
+    colorWarningBgHover: warningColors[2],
+    colorWarningBorder: warningColors[3],
+    colorWarningBorderHover: warningColors[4],
+    colorWarningHover: warningColors[4],
+    colorWarning: warningColors[6],
+    colorWarningActive: warningColors[7],
+    colorWarningTextHover: warningColors[8],
+    colorWarningText: warningColors[9],
+    colorWarningTextActive: warningColors[10],
+
+    colorInfoBg: infoColors[1],
+    colorInfoBgHover: infoColors[2],
+    colorInfoBorder: infoColors[3],
+    colorInfoBorderHover: infoColors[4],
+    colorInfoHover: infoColors[4],
+    colorInfo: infoColors[6],
+    colorInfoActive: infoColors[7],
+    colorInfoTextHover: infoColors[8],
+    colorInfoText: infoColors[9],
+    colorInfoTextActive: infoColors[10],
+
+    colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+    colorWhite: '#fff',
+  }
+}

package/src/theme/themes/shared/genCommonMapToken.ts

@@ -0,0 +1,19 @@
+import type { CommonMapToken, SeedToken } from '../../interface'
+import genRadius from './genRadius'
+
+export default function genCommonMapToken(token: SeedToken): CommonMapToken {
+  const { motionUnit, motionBase, borderRadius, lineWidth } = token
+
+  return {
+    // motion
+    motionDurationFast: `${(motionBase + motionUnit).toFixed(1)}s`,
+    motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
+    motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
+
+    // line
+    lineWidthBold: lineWidth + 1,
+
+    // radius
+    ...genRadius(borderRadius),
+  }
+}

package/src/theme/themes/shared/genControlHeight.ts

@@ -0,0 +1,13 @@
+import type { HeightMapToken, SeedToken } from '../../interface'
+
+const genControlHeight = (token: SeedToken): HeightMapToken => {
+  const { controlHeight } = token
+
+  return {
+    controlHeightSM: controlHeight * 0.75,
+    controlHeightXS: controlHeight * 0.5,
+    controlHeightLG: controlHeight * 1.25,
+  }
+}
+
+export default genControlHeight

package/src/theme/themes/shared/genFontMapToken.ts

@@ -0,0 +1,33 @@
+import type { FontMapToken } from '../../interface'
+import genFontSizes from './genFontSizes'
+
+const genFontMapToken = (fontSize: number): FontMapToken => {
+  const fontSizePairs = genFontSizes(fontSize)
+  const fontSizes = fontSizePairs.map((pair) => pair.size)
+  const lineHeights = fontSizePairs.map((pair) => pair.lineHeight)
+
+  return {
+    fontSizeSM: fontSizes[0],
+    fontSize: fontSizes[1],
+    fontSizeLG: fontSizes[2],
+    fontSizeXL: fontSizes[3],
+
+    fontSizeHeading1: fontSizes[6],
+    fontSizeHeading2: fontSizes[5],
+    fontSizeHeading3: fontSizes[4],
+    fontSizeHeading4: fontSizes[3],
+    fontSizeHeading5: fontSizes[2],
+
+    lineHeight: lineHeights[1],
+    lineHeightLG: lineHeights[2],
+    lineHeightSM: lineHeights[0],
+
+    lineHeightHeading1: lineHeights[6],
+    lineHeightHeading2: lineHeights[5],
+    lineHeightHeading3: lineHeights[4],
+    lineHeightHeading4: lineHeights[3],
+    lineHeightHeading5: lineHeights[2],
+  }
+}
+
+export default genFontMapToken

package/src/theme/themes/shared/genFontSizes.ts

@@ -0,0 +1,24 @@
+// https://zhuanlan.zhihu.com/p/32746810
+export default function getFontSizes(base: number) {
+  const fontSizes = Array.from({ length: 10 })
+    .fill(null)
+    .map((_, index) => {
+      const i = index - 1
+      const baseSize = base * 2.71828 ** (i / 5)
+      const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize)
+
+      // Convert to even
+      return Math.floor(intSize / 2) * 2
+    })
+
+  fontSizes[1] = base
+
+  return fontSizes.map((size) => {
+    const height = size + 8
+
+    return {
+      size,
+      lineHeight: height / size,
+    }
+  })
+}

package/src/theme/themes/shared/genRadius.ts

@@ -0,0 +1,59 @@
+import type { MapToken } from '../../interface'
+
+const genRadius = (
+  radiusBase: number,
+): Pick<
+  MapToken,
+  'borderRadiusXS' | 'borderRadiusSM' | 'borderRadiusLG' | 'borderRadius' | 'borderRadiusOuter'
+> => {
+  let radiusLG = radiusBase
+  let radiusSM = radiusBase
+  let radiusXS = radiusBase
+  let radiusOuter = radiusBase
+
+  // radiusLG
+  if (radiusBase < 6 && radiusBase >= 5) {
+    radiusLG = radiusBase + 1
+  } else if (radiusBase < 16 && radiusBase >= 6) {
+    radiusLG = radiusBase + 2
+  } else if (radiusBase >= 16) {
+    radiusLG = 16
+  }
+
+  // radiusSM
+  if (radiusBase < 7 && radiusBase >= 5) {
+    radiusSM = 4
+  } else if (radiusBase < 8 && radiusBase >= 7) {
+    radiusSM = 5
+  } else if (radiusBase < 14 && radiusBase >= 8) {
+    radiusSM = 6
+  } else if (radiusBase < 16 && radiusBase >= 14) {
+    radiusSM = 7
+  } else if (radiusBase >= 16) {
+    radiusSM = 8
+  }
+
+  // radiusXS
+  if (radiusBase < 6 && radiusBase >= 2) {
+    radiusXS = 1
+  } else if (radiusBase >= 6) {
+    radiusXS = 2
+  }
+
+  // radiusOuter
+  if (radiusBase > 4 && radiusBase < 8) {
+    radiusOuter = 4
+  } else if (radiusBase >= 8) {
+    radiusOuter = 6
+  }
+
+  return {
+    borderRadius: radiusBase > 16 ? 16 : radiusBase,
+    borderRadiusXS: radiusXS,
+    borderRadiusSM: radiusSM,
+    borderRadiusLG: radiusLG,
+    borderRadiusOuter: radiusOuter,
+  }
+}
+
+export default genRadius

package/src/theme/themes/shared/genSizeMapToken.ts

@@ -0,0 +1,17 @@
+import type { SeedToken, SizeMapToken } from '../../interface'
+
+export default function genSizeMapToken(token: SeedToken): SizeMapToken {
+  const { sizeUnit, sizeStep } = token
+
+  return {
+    sizeXXL: sizeUnit * (sizeStep + 8), // 48
+    sizeXL: sizeUnit * (sizeStep + 4), // 32
+    sizeLG: sizeUnit * (sizeStep + 2), // 24
+    sizeMD: sizeUnit * (sizeStep + 1), // 20
+    sizeMS: sizeUnit * sizeStep, // 16
+    size: sizeUnit * sizeStep, // 16
+    sizeSM: sizeUnit * (sizeStep - 1), // 12
+    sizeXS: sizeUnit * (sizeStep - 2), // 8
+    sizeXXS: sizeUnit * (sizeStep - 3), // 4
+  }
+}

package/src/theme/util/alias.ts

@@ -0,0 +1,202 @@
+import { TinyColor } from '@ctrl/tinycolor'
+
+import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../interface'
+import seedToken from '../themes/seed'
+import getAlphaColor from './getAlphaColor'
+
+/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
+type RawMergedToken = MapToken & OverrideToken & { override: Partial<AliasToken> }
+
+/**
+ * Seed (designer) > Derivative (designer) > Alias (developer).
+ *
+ * Merge seed & derivative & override token and generate alias token for developer.
+ */
+export default function formatToken(derivativeToken: RawMergedToken): AliasToken {
+  const { override, ...restToken } = derivativeToken
+  const overrideTokens = { ...override }
+
+  Object.keys(seedToken).forEach((token) => {
+    delete overrideTokens[token as keyof SeedToken]
+  })
+
+  const mergedToken = {
+    ...restToken,
+    ...overrideTokens,
+  }
+
+  const screenXS = 480
+  const screenSM = 576
+  const screenMD = 768
+  const screenLG = 992
+  const screenXL = 1200
+  const screenXXL = 1600
+  const screenXXXL = 2000
+
+  // Generate alias token
+  const aliasToken: AliasToken = {
+    ...mergedToken,
+
+    colorLink: mergedToken.colorInfoText,
+    colorLinkHover: mergedToken.colorInfoHover,
+    colorLinkActive: mergedToken.colorInfoActive,
+
+    // ============== Background ============== //
+    colorFillContent: mergedToken.colorFillSecondary,
+    colorFillContentHover: mergedToken.colorFill,
+    colorFillAlter: mergedToken.colorFillQuaternary,
+    colorBgContainerDisabled: mergedToken.colorFillTertiary,
+
+    // ============== Split ============== //
+    colorBorderBg: mergedToken.colorBgContainer,
+    colorSplit: getAlphaColor(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer),
+
+    // ============== Text ============== //
+    colorTextPlaceholder: mergedToken.colorTextQuaternary,
+    colorTextDisabled: mergedToken.colorTextQuaternary,
+    colorTextHeading: mergedToken.colorText,
+    colorTextLabel: mergedToken.colorTextSecondary,
+    colorTextDescription: mergedToken.colorTextTertiary,
+    colorTextLightSolid: mergedToken.colorWhite,
+    colorHighlight: mergedToken.colorError,
+    colorBgTextHover: mergedToken.colorFillSecondary,
+    colorBgTextActive: mergedToken.colorFill,
+
+    colorIcon: mergedToken.colorTextTertiary,
+    colorIconHover: mergedToken.colorText,
+
+    colorErrorOutline: getAlphaColor(mergedToken.colorErrorBg, mergedToken.colorBgContainer),
+    colorWarningOutline: getAlphaColor(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
+
+    // Font
+    fontSizeIcon: mergedToken.fontSizeSM,
+
+    // Control
+    lineWidth: mergedToken.lineWidth,
+    controlOutlineWidth: mergedToken.lineWidth * 2,
+    // Checkbox size and expand icon size
+    controlInteractiveSize: mergedToken.controlHeight / 2,
+
+    controlItemBgHover: mergedToken.colorFillTertiary,
+    controlItemBgActive: mergedToken.colorPrimaryBg,
+    controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
+    controlItemBgActiveDisabled: mergedToken.colorFill,
+    controlTmpOutline: mergedToken.colorFillQuaternary,
+    controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
+
+    lineType: mergedToken.lineType,
+    borderRadius: mergedToken.borderRadius,
+    borderRadiusXS: mergedToken.borderRadiusXS,
+    borderRadiusSM: mergedToken.borderRadiusSM,
+    borderRadiusLG: mergedToken.borderRadiusLG,
+
+    fontWeightStrong: 600,
+
+    opacityLoading: 0.65,
+
+    linkDecoration: 'none',
+    linkHoverDecoration: 'none',
+    linkFocusDecoration: 'none',
+
+    controlPaddingHorizontal: 12,
+    controlPaddingHorizontalSM: 8,
+
+    paddingXXS: mergedToken.sizeXXS,
+    paddingXS: mergedToken.sizeXS,
+    paddingSM: mergedToken.sizeSM,
+    padding: mergedToken.size,
+    paddingMD: mergedToken.sizeMD,
+    paddingLG: mergedToken.sizeLG,
+    paddingXL: mergedToken.sizeXL,
+
+    paddingContentHorizontalLG: mergedToken.sizeLG,
+    paddingContentVerticalLG: mergedToken.sizeMS,
+    paddingContentHorizontal: mergedToken.sizeMS,
+    paddingContentVertical: mergedToken.sizeSM,
+    paddingContentHorizontalSM: mergedToken.size,
+    paddingContentVerticalSM: mergedToken.sizeXS,
+
+    marginXXS: mergedToken.sizeXXS,
+    marginXS: mergedToken.sizeXS,
+    marginSM: mergedToken.sizeSM,
+    margin: mergedToken.size,
+    marginMD: mergedToken.sizeMD,
+    marginLG: mergedToken.sizeLG,
+    marginXL: mergedToken.sizeXL,
+    marginXXL: mergedToken.sizeXXL,
+
+    boxShadow: `
+      0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+    `,
+    boxShadowSecondary: `
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    boxShadowTertiary: `
+      0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+    `,
+
+    screenXS,
+    screenXSMin: screenXS,
+    screenXSMax: screenSM - 1,
+    screenSM,
+    screenSMMin: screenSM,
+    screenSMMax: screenMD - 1,
+    screenMD,
+    screenMDMin: screenMD,
+    screenMDMax: screenLG - 1,
+    screenLG,
+    screenLGMin: screenLG,
+    screenLGMax: screenXL - 1,
+    screenXL,
+    screenXLMin: screenXL,
+    screenXLMax: screenXXL - 1,
+    screenXXL,
+    screenXXLMin: screenXXL,
+    screenXXLMax: screenXXXL - 1,
+    screenXXXL,
+    screenXXXLMin: screenXXXL,
+
+    // FIXME: component box-shadow, should be removed
+    boxShadowPopoverArrow: '3px 3px 7px rgba(0, 0, 0, 0.1)',
+    boxShadowCard: `
+      0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
+      0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
+      0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
+    `,
+    boxShadowDrawerRight: `
+      -6px 0 16px 0 rgba(0, 0, 0, 0.08),
+      -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+      -9px 0 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    boxShadowDrawerLeft: `
+      6px 0 16px 0 rgba(0, 0, 0, 0.08),
+      3px 0 6px -4px rgba(0, 0, 0, 0.12),
+      9px 0 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    boxShadowDrawerUp: `
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    boxShadowDrawerDown: `
+      0 -6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 -3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 -9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)',
+    boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)',
+    boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)',
+    boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)',
+
+    // Override AliasToken
+    ...overrideTokens,
+  }
+
+  return aliasToken
+}

package/src/theme/util/genComponentStyleHook.ts

@@ -0,0 +1,110 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+
+import { useStyleRegister } from '../../_util/cssinjs'
+import type { CSSInterpolation } from '../../_util/cssinjs'
+import { useConfigContextInject } from '../../config-provider/context'
+import { genCommonStyle, genLinkStyle } from '../../style'
+import type { ComponentTokenMap, GlobalToken } from '../interface'
+import type { UseComponentStyleResult } from '../internal'
+import { mergeToken, statisticToken, useToken } from '../internal'
+
+export type OverrideTokenWithoutDerivative = ComponentTokenMap
+export type OverrideComponent = keyof OverrideTokenWithoutDerivative
+export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
+  ComponentTokenMap[ComponentName]
+
+export interface StyleInfo<ComponentName extends OverrideComponent> {
+  hashId: string
+  prefixCls: string
+  rootPrefixCls: string
+  iconPrefixCls: string
+  overrideComponentToken: ComponentTokenMap[ComponentName]
+}
+
+export type TokenWithCommonCls<T> = T & {
+  /** Wrap component class with `.` prefix */
+  componentCls: string
+  /** Origin prefix which do not have `.` prefix */
+  prefixCls: string
+  /** Wrap icon class with `.` prefix */
+  iconCls: string
+  /** Wrap ant prefixCls class with `.` prefix */
+  antCls: string
+}
+export type FullToken<ComponentName extends OverrideComponent> = TokenWithCommonCls<
+  GlobalTokenWithComponent<ComponentName>
+>
+
+export default function genComponentStyleHook<ComponentName extends OverrideComponent>(
+  component: ComponentName,
+  styleFn: (token: FullToken<ComponentName>, info: StyleInfo<ComponentName>) => CSSInterpolation,
+  getDefaultToken?:
+    | OverrideTokenWithoutDerivative[ComponentName]
+    | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
+) {
+  return (_prefixCls?: Ref<string>): UseComponentStyleResult => {
+    const prefixCls = computed(() => _prefixCls?.value)
+    const [theme, token, hashId] = useToken()
+    const { getPrefixCls, iconPrefixCls } = useConfigContextInject()
+    const rootPrefixCls = computed(() => getPrefixCls())
+    const sharedInfo = computed(() => {
+      return {
+        theme: theme.value,
+        token: token.value,
+        hashId: hashId.value,
+        path: ['Shared', rootPrefixCls.value],
+      }
+    })
+    // Generate style for all a tags in antd component.
+    useStyleRegister(sharedInfo, () => [
+      {
+        // Link
+        '&': genLinkStyle(token.value),
+      },
+    ])
+    const componentInfo = computed(() => {
+      return {
+        theme: theme.value,
+        token: token.value,
+        hashId: hashId.value,
+        path: [component, prefixCls.value, iconPrefixCls.value],
+      }
+    })
+    return [
+      useStyleRegister(componentInfo, () => {
+        const { token: proxyToken, flush } = statisticToken(token.value)
+
+        const defaultComponentToken =
+          typeof getDefaultToken === 'function'
+            ? (getDefaultToken as any)(proxyToken)
+            : getDefaultToken
+        const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] }
+
+        const componentCls = `.${prefixCls.value}`
+        const mergedToken = mergeToken<
+          TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
+        >(
+          proxyToken,
+          {
+            componentCls,
+            prefixCls: prefixCls.value,
+            iconCls: `.${iconPrefixCls.value}`,
+            antCls: `.${rootPrefixCls.value}`,
+          },
+          mergedComponentToken,
+        )
+        const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
+          hashId: hashId.value,
+          prefixCls: prefixCls.value,
+          rootPrefixCls: rootPrefixCls.value,
+          iconPrefixCls: iconPrefixCls.value,
+          overrideComponentToken: token.value[component],
+        })
+        flush(component, mergedComponentToken)
+        return [genCommonStyle(token.value, prefixCls.value), styleInterpolation]
+      }),
+      hashId,
+    ]
+  }
+}

package/src/theme/util/getAlphaColor.ts

@@ -0,0 +1,29 @@
+import { TinyColor } from '@ctrl/tinycolor'
+
+function isStableColor(color: number): boolean {
+  return color >= 0 && color <= 255
+}
+
+function getAlphaColor(frontColor: string, backgroundColor: string): string {
+  const { r: fR, g: fG, b: fB, a: originAlpha } = new TinyColor(frontColor).toRgb()
+  if (originAlpha < 1) {
+    return frontColor
+  }
+
+  const { r: bR, g: bG, b: bB } = new TinyColor(backgroundColor).toRgb()
+
+  for (let fA = 0.01; fA <= 1; fA += 0.01) {
+    const r = Math.round((fR - bR * (1 - fA)) / fA)
+    const g = Math.round((fG - bG * (1 - fA)) / fA)
+    const b = Math.round((fB - bB * (1 - fA)) / fA)
+    if (isStableColor(r) && isStableColor(g) && isStableColor(b)) {
+      return new TinyColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString()
+    }
+  }
+
+  // fallback
+  /* istanbul ignore next */
+  return new TinyColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString()
+}
+
+export default getAlphaColor