refactor: More alias token (#34681)

* chore: colorHighlight * chore: bgSecondary * chore: colorLink * chore: link style * chore: rm fly variables * chore: colorAction * chore: add warning comment * chore: token outline * chore: colorBgXXX * chore: alert * rm: zIndex * chore: rm zIndexComponent * fix: tag color checkabl * chore: tags tmp
3 years ago · d952088650
19 changed files with 164 additions and 219 deletions
--- a/components/_util/theme/interface.ts
+++ b/components/_util/theme/interface.ts
@ -34,7 +34,7 @@ export interface OverrideToken {
 // ======================================================================
 // ==                            Seed Token                            ==
 // ======================================================================
-
+// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
 export interface SeedToken extends PresetColorType {
  // Color
  colorPrimary: string;
@ -56,6 +56,7 @@ export interface SeedToken extends PresetColorType {
  gridBaseStep: number;

  // Line
+  /** Border width of base components */
  lineWidth: number;

  // Motion
@ -76,34 +77,54 @@ export interface SeedToken extends PresetColorType {

  // Control Base
  controlHeight: number;
+
+  // zIndex
+  /** Base zIndex of component like BackTop, Affix which can be cover by large popup */
+  zIndexBase: number;
+  /** Base popup component zIndex */
+  zIndexPopup: number;
 }

 // ======================================================================
 // ==                         Derivative Token                         ==
 // ======================================================================
-
+// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
 export interface DerivativeToken extends SeedToken, ColorPalettes {
  // Color
  colorPrimaryHover: string;
  colorPrimaryActive: string;
  colorPrimaryOutline: string;
+  colorPrimarySecondary: string; // primary[2]
+
+  colorSuccessSecondary: string;
+  colorBgSuccess: string; // success[0]

  colorWarningHover: string;
  colorWarningActive: string;
  colorWarningOutline: string;
+  colorWarningSecondary: string;
+  colorBgWarning: string;

  colorErrorHover: string;
  colorErrorActive: string;
  colorErrorOutline: string;
+  colorErrorSecondary: string;
+  colorBgError: string;
+
+  colorInfoSecondary: string;
+  colorBgInfo: string;

  colorText2: string;
  colorTextBelow: string;
  colorTextBelow2: string;
  colorTextBelow3: string;

+  colorBg2: string;
  colorBgBelow: string;
  colorBgBelow2: string;

+  colorHighlight: string;
+
  // Font
  fontSizes: number[];
  lineHeights: number[];
@ -131,6 +152,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
  radiusLG: number;
  radiusXL: number;

+  // Control
  /** @private Only Used for control inside component like Multiple Select inner selection item */
  controlHeightXS: number;
  controlHeightSM: number;
@ -140,7 +162,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
 // ======================================================================
 // ==                           Alias Token                            ==
 // ======================================================================
-// FIXME: DerivativeToken should part pick
+// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
 export interface AliasToken extends DerivativeToken {
  // Font
  fontSizeSM: number;
@ -180,29 +202,27 @@ export interface AliasToken extends DerivativeToken {
  /** Placeholder text color */
  colorPlaceholder: string;
  colorTextHeading: string;
+
+  /** Weak action. Such as `allowClear` or Alert close button */
+  colorAction: string;
+  /** Weak action hover color. Such as `allowClear` or Alert close button */
+  colorActionHover: string;
+
+  colorLink: string;
+  colorLinkHover: string;
+  colorLinkActive: string;
+
  colorBgContainer: string;
  colorBgComponent: string;
+  colorBgComponentSecondary: string;
  colorBgComponentDisabled: string;

  // =============== Legacy: should be remove ===============
-  iconColorHover: string;
-
  padding: number;
  margin: number;

-  backgroundLight: string;
-
-  zIndexDropdown: number;
-  zIndexAffix: number;
-
  boxShadow: string;

-  // =============== Legacy: should be remove ===============
-  highlightColor: string;
-
-  linkColor: string;
-  linkHoverColor: string;
-  linkActiveColor: string;
  linkDecoration: React.CSSProperties['textDecoration'];
  linkHoverDecoration: React.CSSProperties['textDecoration'];
  linkFocusDecoration: React.CSSProperties['textDecoration'];
@ -216,26 +236,4 @@ export interface AliasToken extends DerivativeToken {
  marginXS: number;
  marginLG: number;
  marginXXS: number;
-
-  primaryColors: string[];
-  errorColors: string[];
-  warningColors: string[];
-
-  // TMP
-  tmpPrimaryColorWeak: string;
-  tmpPrimaryHoverColorWeak: string;
-  // Checked background for Checkable Tag
-  tmpPrimaryColor6: string;
-  // Active background for Checkable Tag
-  tmpPrimaryColor7: string;
-
-  tmpSuccessColorDeprecatedBg: string;
-  tmpWarningColorDeprecatedBg: string;
-  tmpErrorColorDeprecatedBg: string;
-  tmpInfoColorDeprecatedBg: string;
-
-  tmpSuccessColorDeprecatedBorder: string;
-  tmpWarningColorDeprecatedBorder: string;
-  tmpErrorColorDeprecatedBorder: string;
-  tmpInfoColorDeprecatedBorder: string;
 }
--- a/components/_util/theme/themes/default.ts
+++ b/components/_util/theme/themes/default.ts
@ -24,8 +24,10 @@ const defaultPresetColors: PresetColorType = {
 export function derivative(token: SeedToken): DerivativeToken {
  const {
    colorPrimary,
+    colorSuccess,
    colorWarning,
    colorError,
+    colorInfo,
    motionUnit,
    motionBase,
    fontSizeBase,
@ -38,8 +40,10 @@ export function derivative(token: SeedToken): DerivativeToken {
  } = token;

  const primaryColors = generate(colorPrimary);
+  const successColors = generate(colorSuccess);
  const warningColors = generate(colorWarning);
  const errorColors = generate(colorError);
+  const infoColors = generate(colorInfo);

  const colorPalettes = Object.keys(defaultPresetColors)
    .map((colorKey: keyof PresetColorType) => {
@ -92,18 +96,34 @@ export function derivative(token: SeedToken): DerivativeToken {
    radiusXL: radiusBase * 4,

    // color
+    colorBg2: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
    colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
    colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),

    colorPrimaryActive: primaryColors[6],
    colorPrimaryHover: primaryColors[4],
    colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
+    colorPrimarySecondary: primaryColors[2],
+
+    colorSuccessSecondary: successColors[2],
+    colorBgSuccess: successColors[0],
+
    colorErrorActive: errorColors[6],
    colorErrorHover: errorColors[4],
    colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
+    colorErrorSecondary: errorColors[2],
+    colorBgError: errorColors[0],
+
    colorWarningActive: warningColors[6],
    colorWarningHover: warningColors[4],
    colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
+    colorWarningSecondary: warningColors[2],
+    colorBgWarning: warningColors[0],
+
+    colorInfoSecondary: infoColors[2],
+    colorBgInfo: infoColors[0],
+
+    colorHighlight: errorColors[4],

    // text color
    colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(),
@ -165,6 +185,10 @@ const seedToken: SeedToken = {

  // Control Base
  controlHeight: 32,
+
+  // zIndex
+  zIndexBase: 0,
+  zIndexPopup: 1000,
 };

 export default seedToken;
--- a/components/_util/theme/util/alias.ts
+++ b/components/_util/theme/util/alias.ts
@ -39,8 +39,16 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken

    colorBgContainer: mergedToken.colorBgBelow2,
    colorBgComponent: mergedToken.colorBg,
+    colorBgComponentSecondary: mergedToken.colorBg2,
    colorBgComponentDisabled: mergedToken.colorBgBelow2,

+    colorLink: mergedToken.colorPrimary,
+    colorLinkHover: primaryColors[4],
+    colorLinkActive: primaryColors[6],
+
+    colorAction: mergedToken.colorTextBelow,
+    colorActionHover: mergedToken.colorText,
+
    // Font
    fontSizeSM: fontSizes[0],
    fontSize: fontSizes[1],
@ -76,37 +84,19 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken

    // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
    // FIXME: Handle this when derivative is ready
-    primaryColors,
-    warningColors,
-    errorColors,
-
-    tmpPrimaryColorWeak: primaryColors[2],
-    tmpPrimaryHoverColorWeak: primaryColors[0],
-    tmpPrimaryColor6: primaryColors[5],
-    tmpPrimaryColor7: primaryColors[6],
-
-    tmpSuccessColorDeprecatedBg: successColors[0],
-    tmpWarningColorDeprecatedBg: warningColors[0],
-    tmpErrorColorDeprecatedBg: errorColors[0],
-    tmpInfoColorDeprecatedBg: infoColors[0],
-
-    tmpSuccessColorDeprecatedBorder: successColors[2],
-    tmpWarningColorDeprecatedBorder: warningColors[2],
-    tmpErrorColorDeprecatedBorder: errorColors[2],
-    tmpInfoColorDeprecatedBorder: infoColors[2],
-
-    highlightColor: errorColors[5], // FIXME: Should not align with error color
-    // FIXME: fix2 badge-color
-
-    linkColor: mergedToken.colorPrimary,
-    linkHoverColor: primaryColors[4],
-    linkActiveColor: primaryColors[6],
+    // primaryColors,
+    // warningColors,
+    // errorColors,
+
+    colorSuccessSecondary: successColors[2],
+    colorWarningSecondary: warningColors[2],
+    colorErrorSecondary: errorColors[2],
+    colorInfoSecondary: infoColors[2],
+
    linkDecoration: 'none',
    linkHoverDecoration: 'none',
    linkFocusDecoration: 'none',

-    iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
-
    controlPaddingHorizontal: 16,
    controlPaddingHorizontalSM: 12,

@ -123,12 +113,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
    // marginSM: 8,
    marginLG: 32,

-    // background of header and selected item
-    backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
-
-    zIndexDropdown: 1050,
-    zIndexAffix: 10,
-
    boxShadow: `
      0 3px 6px -4px rgba(0, 0, 0, 0.12),
      0 6px 16px 0 rgba(0, 0, 0, 0.08),
--- a/components/_util/theme/util/operationUnit.tsx
+++ b/components/_util/theme/util/operationUnit.tsx
@ -3,17 +3,19 @@ import { DerivativeToken } from '..';

 // eslint-disable-next-line import/prefer-default-export
 export const operationUnit = (token: DerivativeToken): CSSObject => ({
-  color: token.linkColor,
+  // FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
+  // And Typography use this to generate link style which should not do this.
+  color: token.colorLink,
  textDecoration: 'none',
  outline: 'none',
  cursor: 'pointer',
  transition: `color ${token.motionDurationSlow}`,

  '&:focus, &:hover': {
-    color: token.linkHoverColor,
+    color: token.colorLinkHover,
  },

  '&:active': {
-    color: token.linkActiveColor,
+    color: token.colorLinkActive,
  },
 });
--- a/components/affix/style/index.tsx
+++ b/components/affix/style/index.tsx
@ -10,6 +10,7 @@ import {

 interface AffixToken extends DerivativeToken {
  affixCls: string;
+  zIndexAffix: number;
 }

 // ============================== Shared ==============================
@ -32,6 +33,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
    ...token,

    affixCls: `.${prefixCls}`,
+    zIndexAffix: token.zIndexBase + 10,
  };

  return [
--- a/components/alert/style/index.tsx
+++ b/components/alert/style/index.tsx
@ -2,7 +2,6 @@
 // import './index.less';

 // deps-lint-skip-all
-import { generate } from '@ant-design/colors';
 import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';

 import {
@ -23,22 +22,6 @@ type AlertToken = DerivativeToken & {
  alertCloseColor: string;
  alertCloseHoverColor: string;

-  alertInfoBgColor: string;
-  alertInfoIconColor: string;
-  alertInfoBorderColor: string;
-
-  alertSuccessBgColor: string;
-  alertSuccessIconColor: string;
-  alertSuccessBorderColor: string;
-
-  alertWarningBgColor: string;
-  alertWarningIconColor: string;
-  alertWarningBorderColor: string;
-
-  alertErrorBgColor: string;
-  alertErrorIconColor: string;
-  alertErrorBorderColor: string;
-
  alertWithDescriptionIconSize: number;
  alertWithDescriptionPaddingVertical: number;
  alertWithDescriptionNoIconPaddingVertical: number;
@ -161,54 +144,43 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
 export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
  const {
    alertCls,
-    alertInfoBgColor,
-    alertInfoIconColor,
-    alertInfoBorderColor,

-    alertSuccessBgColor,
-    alertSuccessIconColor,
-    alertSuccessBorderColor,
+    colorSuccess,
+    colorSuccessSecondary,
+    colorBgSuccess,
+
+    colorWarning,
+    colorWarningSecondary,
+    colorBgWarning,

-    alertWarningBgColor,
-    alertWarningIconColor,
-    alertWarningBorderColor,
+    colorError,
+    colorErrorSecondary,
+    colorBgError,

-    alertErrorBgColor,
-    alertErrorIconColor,
-    alertErrorBorderColor,
+    colorInfo,
+    colorInfoSecondary,
+    colorBgInfo,
  } = token;

  return {
    [alertCls]: {
      '&-success': genAlertTypeStyle(
-        alertSuccessBgColor,
-        alertSuccessBorderColor,
-        alertSuccessIconColor,
-        token,
-        alertCls,
-      ),
-      '&-info': genAlertTypeStyle(
-        alertInfoBgColor,
-        alertInfoBorderColor,
-        alertInfoIconColor,
+        colorBgSuccess,
+        colorSuccessSecondary,
+        colorSuccess,
        token,
        alertCls,
      ),
+      '&-info': genAlertTypeStyle(colorBgInfo, colorInfoSecondary, colorInfo, token, alertCls),
      '&-warning': genAlertTypeStyle(
-        alertWarningBgColor,
-        alertWarningBorderColor,
-        alertWarningIconColor,
+        colorBgWarning,
+        colorWarningSecondary,
+        colorWarning,
        token,
        alertCls,
      ),
      '&-error': {
-        ...genAlertTypeStyle(
-          alertErrorBgColor,
-          alertErrorBorderColor,
-          alertErrorIconColor,
-          token,
-          alertCls,
-        ),
+        ...genAlertTypeStyle(colorBgError, colorErrorSecondary, colorError, token, alertCls),
        [`${alertCls}-description > pre`]: {
          margin: 0,
          padding: 0,
@ -281,50 +253,17 @@ export default function useStyle(
  const alertCls = `.${prefixCls}`;

  const alertMessageColor = token.colorTextHeading;
-  const alertCloseColor = token.colorTextSecondary;
-  const alertCloseHoverColor = token.iconColorHover;
+  const alertCloseColor = token.colorAction;
+  const alertCloseHoverColor = token.colorActionHover;
  // FIXME
  const alertWithDescriptionIconSize = 24;
  const alertWithDescriptionPaddingVertical = token.padding - 1;
  const alertWithDescriptionNoIconPaddingVertical = token.padding - 1;

-  // FIXME
-  const infoColors = generate(token.colorInfo);
-  const alertInfoBgColor = infoColors[0];
-  const alertInfoIconColor = token.colorInfo;
-  const alertInfoBorderColor = infoColors[2];
-
-  const successColors = generate(token.colorSuccess);
-  const alertSuccessBgColor = successColors[0];
-  const alertSuccessIconColor = token.colorSuccess;
-  const alertSuccessBorderColor = successColors[2];
-
-  const warningColors = generate(token.colorWarning);
-  const alertWarningBgColor = warningColors[0];
-  const alertWarningIconColor = token.colorWarning;
-  const alertWarningBorderColor = warningColors[2];
-
-  const errorColors = generate(token.colorError);
-  const alertErrorBgColor = errorColors[0];
-  const alertErrorIconColor = token.colorError;
-  const alertErrorBorderColor = errorColors[2];
-
  const alertToken: AlertToken = {
    ...token,
    alertCls,
    iconPrefixCls,
-    alertInfoBgColor,
-    alertInfoIconColor,
-    alertInfoBorderColor,
-    alertSuccessBgColor,
-    alertSuccessIconColor,
-    alertSuccessBorderColor,
-    alertWarningBgColor,
-    alertWarningIconColor,
-    alertWarningBorderColor,
-    alertErrorBgColor,
-    alertErrorIconColor,
-    alertErrorBorderColor,
    alertMessageColor,
    alertCloseColor,
    alertCloseHoverColor,
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@ -337,7 +337,7 @@ export default function useStyle(
  const badgeTextColor = token.colorBgComponent;
  const badgeFontWeight = 'normal';
  const badgeFontSize = token.fontSizeSM;
-  const badgeColor = token.highlightColor;
+  const badgeColor = token.colorHighlight;
  const badgeHeightSm = 14; // FIXME: hard code
  const badgeDotSize = 6; // FIXME: hard code
  const badgeFontSizeSm = token.fontSizeSM;
--- a/components/button/style/index.tsx
+++ b/components/button/style/index.tsx
@ -223,14 +223,14 @@ const genDashedButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObj

 // Type: Link
 const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
-  color: token.linkColor,
+  color: token.colorLink,

  ...genHoverActiveButtonStyle(
    {
-      color: token.colorPrimaryHover,
+      color: token.colorLinkHover,
    },
    {
-      color: token.colorPrimaryActive,
+      color: token.colorLinkActive,
    },
  ),

--- a/components/cascader/style/index.tsx
+++ b/components/cascader/style/index.tsx
@ -139,7 +139,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
                },

                '&-keyword': {
-                  color: token.highlightColor,
+                  color: token.colorHighlight,
                },
              },
            },
--- a/components/input/style/index.tsx
+++ b/components/input/style/index.tsx
@ -256,7 +256,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
        fontWeight: 'normal',
        fontSize: token.fontSize,
        textAlign: 'center',
-        backgroundColor: token.backgroundLight,
+        backgroundColor: token.colorBgComponentSecondary,
        border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
        borderRadius: token.controlRadius,
        transition: `all ${token.motionDurationSlow}`,
@ -581,9 +581,10 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
    prefixCls,
    iconPrefixCls,
    inputAffixMargin,
-    colorTextSecondary: textColorSecondary,
-    motionDurationSlow: duration,
-    iconColorHover,
+    colorTextSecondary,
+    motionDurationSlow,
+    colorAction,
+    colorActionHover,
    colorPrimary,
    colorSuccess,
  } = token;
@ -635,7 +636,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
        },

        '&-show-count-suffix': {
-          color: textColorSecondary,
+          color: colorTextSecondary,
        },

        '&-show-count-has-suffix': {
@ -655,12 +656,12 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {

      // password
      [`.${iconPrefixCls}.${prefixCls}-password-icon`]: {
-        color: textColorSecondary,
+        color: colorAction,
        cursor: 'pointer',
-        transition: `all ${duration}`,
+        transition: `all ${motionDurationSlow}`,

        '&:hover': {
-          color: iconColorHover,
+          color: colorActionHover,
        },
      },

--- a/components/mentions/style/index.tsx
+++ b/components/mentions/style/index.tsx
@ -22,19 +22,18 @@ interface MentionsToken extends InputToken {
 const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
  const {
    mentionsCls,
-    backgroundLight,
-    colorTextDisabled: textColorDisabled,
-    controlItemBgHover: itemHoverBackground,
+    colorTextDisabled,
+    controlItemBgHover,
    controlPaddingHorizontal,
-    colorText: textColor,
-    motionDurationSlow: duration,
+    colorText,
+    motionDurationSlow,
    lineHeight,
    controlHeight,
    inputPaddingHorizontal,
    inputPaddingVertical,
    fontSize,
-    colorBgComponent: componentBackground,
-    controlRadius: borderRadius,
+    colorBgComponent,
+    controlRadius,
    boxShadow,
  } = token;

@ -124,8 +123,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
        boxSizing: 'border-box',
        fontSize,
        fontVariant: 'initial',
-        backgroundColor: componentBackground,
-        borderRadius,
+        backgroundColor: colorBgComponent,
+        borderRadius: controlRadius,
        outline: 'none',
        boxShadow,

@ -147,21 +146,21 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
            minWidth: 100, // FIXME: magic
            padding: `5px ${controlPaddingHorizontal}px`, // FIXME: magic
            overflow: 'hidden',
-            color: textColor,
+            color: colorText,
            fontWeight: 'normal',
            lineHeight,
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer',
-            transition: `background ${duration} ease`,
+            transition: `background ${motionDurationSlow} ease`,

            '&:hover': {
-              backgroundColor: itemHoverBackground,
+              backgroundColor: controlItemBgHover,
            },

            '&:first-child': {
-              borderStartStartRadius: borderRadius,
-              borderStartEndRadius: borderRadius,
+              borderStartStartRadius: controlRadius,
+              borderStartEndRadius: controlRadius,
              borderEndStartRadius: 0,
              borderEndEndRadius: 0,
            },
@ -169,29 +168,29 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
            '&:last-child': {
              borderStartStartRadius: 0,
              borderStartEndRadius: 0,
-              borderEndStartRadius: borderRadius,
-              borderEndEndRadius: borderRadius,
+              borderEndStartRadius: controlRadius,
+              borderEndEndRadius: controlRadius,
            },

            '&-disabled': {
-              color: textColorDisabled,
+              color: colorTextDisabled,
              cursor: 'not-allowed',

              '&:hover': {
-                color: textColorDisabled,
-                backgroundColor: itemHoverBackground,
+                color: colorTextDisabled,
+                backgroundColor: controlItemBgHover,
                cursor: 'not-allowed',
              },
            },

            '&-selected': {
-              color: textColor,
+              color: colorText,
              fontWeight: 600, // FIXME: Need design token?
-              backgroundColor: backgroundLight,
+              backgroundColor: controlItemBgHover,
            },

            '&-active': {
-              backgroundColor: itemHoverBackground,
+              backgroundColor: controlItemBgHover,
            },
          },
        },
--- a/components/result/style/index.tsx
+++ b/components/result/style/index.tsx
@ -75,7 +75,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
    [`${resultCls} ${resultCls}-content`]: {
      marginTop: token.padding * 1.5,
      padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`,
-      backgroundColor: token.backgroundLight,
+      backgroundColor: token.colorBgComponentSecondary,
    },

    [`${resultCls} ${resultCls}-extra`]: {
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -25,6 +25,7 @@ export type SelectToken = DerivativeToken & {
  selectCls: string;
  iconPrefixCls: string;
  inputPaddingHorizontalBase: number;
+  zIndexDropdown: number;
 };

 // ============================= Selector =============================
@ -288,6 +289,7 @@ const genSelectStyle = (
    selectCls,
    iconPrefixCls,
    inputPaddingHorizontalBase,
+    zIndexDropdown: token.zIndexPopup + 50,
  };

  return [
--- a/components/select/style/multiple.tsx
+++ b/components/select/style/multiple.tsx
@ -121,7 +121,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
          ...resetIcon(),

          display: 'inline-block',
-          color: token.colorTextSecondary,
+          color: token.colorAction,
          fontWeight: 'bold',
          fontSize: 10,
          lineHeight: 'inherit',
@ -132,7 +132,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
          },

          '&:hover': {
-            color: token.iconColorHover,
+            color: token.colorActionHover,
          },
        },
      },
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@ -53,7 +53,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {

      [`${sliderCls}-track`]: {
        position: 'absolute',
-        backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3
+        backgroundColor: token.colorPrimarySecondary,
        borderRadius: token.controlRadius,
        transition: `background-color ${token.motionDurationSlow}`,
      },
@ -63,7 +63,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
        width: token.handleSize,
        height: token.handleSize,
        backgroundColor: token.colorBgComponent,
-        border: `2px solid ${token.tmpPrimaryColorWeak}`,
+        border: `2px solid ${token.colorPrimarySecondary}`,
        borderRadius: '50%',
        boxShadow: 'none',
        cursor: 'pointer',
@ -158,7 +158,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
        transition: `border-color ${token.motionDurationSlow}`,

        '&-active': {
-          borderColor: token.tmpPrimaryColorWeak,
+          borderColor: token.colorPrimarySecondary,
        },
      },

--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@ -163,23 +163,18 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
      verticalAlign: 'middle',
      backgroundColor: token.colorTextDisabled,
      border: '0',
-      // FIXME
      borderRadius: 100,
      cursor: 'pointer',
      transition: `all ${token.switchDuration}`,
      userSelect: 'none',

-      '&:focus': {
+      '&:focus-visible': {
        outline: 0,
-        // FIXME
-        boxShadow: `0 0 0 2px ${new TinyColor(token.colorTextDisabled)
-          .setAlpha(0.1)
-          .toRgbString()}`,
+        boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorBgComponentDisabled}`,
      },

-      [`&${token.switchCls}-checked:focus`]: {
-        // FIXME
-        boxShadow: `0 0 0 2px ${token.tmpPrimaryHoverColorWeak}`,
+      [`&${token.switchCls}-checked:focus-visible`]: {
+        boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
      },

      '&:focus:hover': {
--- a/components/tag/style/index.tsx
+++ b/components/tag/style/index.tsx
@ -32,8 +32,8 @@ const genTagStatusStyle = (
  return {
    [`.${prefixCls}-${status}`]: {
      color: token[`color${cssVariableType}`],
-      background: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBg`],
-      borderColor: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBorder`],
+      background: token[`colorBg${capitalizedCssVariableType}`],
+      borderColor: token[`color${capitalizedCssVariableType}Secondary`],
    },
  };
 };
@ -115,7 +115,7 @@ const genBaseStyle = (
      },
    },

-    [`.${prefixCls}-checkable`]: {
+    [`&-checkable`]: {
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      cursor: 'pointer',
@ -129,15 +129,15 @@ const genBaseStyle = (
      },

      '&-checked': {
-        backgroundColor: token.tmpPrimaryColor6,
+        backgroundColor: token.colorPrimary,
      },

      '&:active': {
-        backgroundColor: token.tmpPrimaryColor7,
+        backgroundColor: token.colorPrimaryActive,
      },
    },

-    [`.${prefixCls}-hidden`]: {
+    [`&-hidden`]: {
      display: 'none',
    },

@ -157,7 +157,7 @@ export const genTagStyle = (
  const tagFontSize = token.fontSizeSM;
  // FIXME: hard code
  const tagLineHeight = '18px';
-  const tagDefaultBg = token.backgroundLight;
+  const tagDefaultBg = token.colorBgComponentSecondary;
  const tagDefaultColor = token.colorText;

  const tagToken = {
--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@ -95,7 +95,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
      },

      '&-focused:not(:hover):not(&-active-focused)': {
-        background: token.tmpPrimaryHoverColorWeak,
+        background: token.colorPrimaryOutline,
      },

      // =================== Virtual List ===================
@ -276,7 +276,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
        },

        [`&${treeCls}-node-selected`]: {
-          backgroundColor: token.tmpPrimaryHoverColorWeak,
+          backgroundColor: token.colorPrimaryOutline,
        },

        // Icon
--- a/components/typography/style/index.tsx
+++ b/components/typography/style/index.tsx
@ -33,8 +33,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
      '&&-danger': {
        color: token.colorError,
        'a&:active, a&:focus, a&:hover': {
-          // FIXME: need new token like errorColorHover
-          color: token.errorColors[4],
+          color: token.colorErrorHover,
        },
      },