refactor: More alias token (#34658)

* chore: rm disabled color

* chore: color heading

* chore: shows tokn

* chore: fix color mapping

* chore: status colors

* chore: durations

* chore: outline color

* chore: comment info

* chore: background color

* chore: merge nexr

components/_util/theme/interface.ts

@@ -44,6 +44,7 @@ export interface SeedToken extends PresetColorType {
   colorInfo: string;
   colorText: string;
   colorTextLightSolid: string;
+  /** Base component background color. Will derivative container background color with this */
   colorBg: string;
 
   // Font
@@ -59,7 +60,7 @@ export interface SeedToken extends PresetColorType {
 
   // Motion
   motionUnit: number;
-  motionBaseStep: number;
+  motionBase: number;
   motionEaseInOutCirc: string;
   motionEaseInOut: string;
   motionEaseOutBack: string;
@@ -85,10 +86,15 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
   // Color
   colorPrimaryHover: string;
   colorPrimaryActive: string;
+  colorPrimaryOutline: string;
+
   colorWarningHover: string;
   colorWarningActive: string;
+  colorWarningOutline: string;
+
   colorErrorHover: string;
   colorErrorActive: string;
+  colorErrorOutline: string;
 
   colorText2: string;
   colorTextBelow: string;
@@ -116,9 +122,8 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
   gridSpaceXXL: number;
 
   // Motion
-  motionDurationBase: string;
-  motionDurationMd: string;
   motionDurationFast: string;
+  motionDurationMid: string;
   motionDurationSlow: string;
 
   // Radius
@@ -164,49 +169,35 @@ export interface AliasToken extends DerivativeToken {
   controlLineType: string;
   controlRadius: number;
   controlOutlineWidth: number;
+  controlItemBgHover: string; // Note. It also is a color
+  controlItemBgActive: string; // Note. It also is a color
 
   // Color
   colorBorder: string;
   colorSplit: string;
   colorTextSecondary: string;
   colorTextDisabled: string;
+  /** Placeholder text color */
+  colorPlaceholder: string;
+  colorTextHeading: string;
+  colorBgContainer: string;
+  colorBgComponent: string;
+  colorBgComponentDisabled: string;
 
   // =============== Legacy: should be remove ===============
-  placeholderColor: string;
-
-  disabledColor: string;
-
   iconColorHover: string;
 
-  headingColor: string;
-
-  itemHoverBackground: string;
-
   padding: number;
   margin: number;
 
-  background: string;
   backgroundLight: string;
 
-  componentBackground: string;
-  componentBackgroundDisabled: string;
-
   zIndexDropdown: number;
   zIndexAffix: number;
 
-  boxShadow?: string;
+  boxShadow: string;
 
   // =============== Legacy: should be remove ===============
-  primaryHoverColor: string;
-  primaryActiveColor: string;
-  primaryOutlineColor: string;
-  errorHoverColor: string;
-  errorActiveColor: string;
-  errorOutlineColor: string;
-  warningHoverColor: string;
-  warningOutlineColor: string;
-  itemActiveBackground: string;
-
   highlightColor: string;
 
   linkColor: string;
@@ -226,10 +217,6 @@ export interface AliasToken extends DerivativeToken {
   marginLG: number;
   marginXXS: number;
 
-  duration: string;
-  durationMid: string;
-  durationFast: string;
-
   primaryColors: string[];
   errorColors: string[];
   warningColors: string[];

components/_util/theme/themes/default.ts

@@ -27,7 +27,7 @@ export function derivative(token: SeedToken): DerivativeToken {
     colorWarning,
     colorError,
     motionUnit,
-    motionBaseStep,
+    motionBase,
     fontSizeBase,
     sizeUnit,
     sizeBaseStep,
@@ -65,10 +65,9 @@ export function derivative(token: SeedToken): DerivativeToken {
     ...colorPalettes,
 
     // motion
-    motionDurationBase: `${motionUnit * motionBaseStep}s`,
+    motionDurationFast: `${motionBase + motionUnit * 1}s`,
-    motionDurationMd: `${motionUnit * (motionBaseStep - 1)}s`,
+    motionDurationMid: `${motionBase + motionUnit * 2}s`,
-    motionDurationFast: `${motionUnit * (motionBaseStep - 2)}s`,
+    motionDurationSlow: `${motionBase + motionUnit * 3}s`,
-    motionDurationSlow: `${motionUnit * (motionBaseStep + 1)}s`,
 
     // font
     fontSizes: fontSizes.map(fs => fs.size),
@@ -96,12 +95,15 @@ export function derivative(token: SeedToken): DerivativeToken {
     colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
     colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
 
-    colorErrorActive: errorColors[6],
-    colorErrorHover: errorColors[4],
     colorPrimaryActive: primaryColors[6],
     colorPrimaryHover: primaryColors[4],
+    colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
+    colorErrorActive: errorColors[6],
+    colorErrorHover: errorColors[4],
+    colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
     colorWarningActive: warningColors[6],
     colorWarningHover: warningColors[4],
+    colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
 
     // text color
     colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(),
@@ -147,7 +149,7 @@ const seedToken: SeedToken = {
 
   // Motion
   motionUnit: 0.1,
-  motionBaseStep: 3,
+  motionBase: 0,
   motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
   motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
   motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,

components/_util/theme/util/alias.ts

@@ -32,14 +32,14 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     ...mergedToken,
 
     // Colors
-    primaryHoverColor: mergedToken.colorPrimaryHover,
-    primaryActiveColor: mergedToken.colorPrimaryActive,
-    errorHoverColor: mergedToken.colorErrorHover,
-    errorActiveColor: mergedToken.colorErrorActive,
-    warningHoverColor: mergedToken.colorWarningHover,
-
     colorTextSecondary: mergedToken.colorTextBelow,
     colorTextDisabled: mergedToken.colorTextBelow2,
+    colorPlaceholder: mergedToken.colorTextBelow2,
+    colorTextHeading: mergedToken.colorText,
+
+    colorBgContainer: mergedToken.colorBgBelow2,
+    colorBgComponent: mergedToken.colorBg,
+    colorBgComponentDisabled: mergedToken.colorBgBelow2,
 
     // Font
     fontSizeSM: fontSizes[0],
@@ -64,6 +64,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     // Control
     controlLineWidth: mergedToken.lineWidth,
     controlOutlineWidth: mergedToken.lineWidth * 2,
+    controlItemBgHover: mergedToken.colorBgBelow2,
 
     // 👀👀👀👀👀👀👀👀👀 Not align with Derivative 👀👀👀👀👀👀👀👀👀
     // FIXME: @arvinxx handle this
@@ -71,6 +72,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     controlRadius: mergedToken.radiusBase,
     colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
     colorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
+    controlItemBgActive: primaryColors[0],
 
     // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
     // FIXME: Handle this when derivative is ready
@@ -93,12 +95,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     tmpErrorColorDeprecatedBorder: errorColors[2],
     tmpInfoColorDeprecatedBorder: infoColors[2],
 
-    primaryOutlineColor: new TinyColor(mergedToken.colorPrimary).setAlpha(0.2).toRgbString(),
-    errorOutlineColor: new TinyColor(mergedToken.colorError).setAlpha(0.2).toRgbString(),
-    warningOutlineColor: new TinyColor(mergedToken.colorWarning).setAlpha(0.2).toRgbString(),
-
-    itemActiveBackground: primaryColors[0],
-
     highlightColor: errorColors[5], // FIXME: Should not align with error color
     // FIXME: fix2 badge-color
 
@@ -109,16 +105,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     linkHoverDecoration: 'none',
     linkFocusDecoration: 'none',
 
-    placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
-
-    disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(),
-
-    headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
-
     iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
 
-    itemHoverBackground: '#f5f5f5',
-
     controlPaddingHorizontal: 16,
     controlPaddingHorizontalSM: 12,
 
@@ -135,21 +123,17 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     // marginSM: 8,
     marginLG: 32,
 
-    // Default grey background color
-    background: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
-
     // background of header and selected item
     backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
 
-    componentBackground: '#fff',
-    componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
-
-    duration: '0.3s',
-    durationMid: '0.2s',
-    durationFast: '0.1s',
-
     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),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,
   };
 
   return aliasToken;

components/_util/theme/util/operationUnit.tsx

@@ -7,7 +7,7 @@ export const operationUnit = (token: DerivativeToken): CSSObject => ({
   textDecoration: 'none',
   outline: 'none',
   cursor: 'pointer',
-  transition: `color ${token.duration}`,
+  transition: `color ${token.motionDurationSlow}`,
 
   '&:focus, &:hover': {
     color: token.linkHoverColor,

components/_util/theme/util/slide.tsx

@@ -14,7 +14,7 @@ export const initSlideMotion = (
   const motionCls = `.${rootMotionName}`;
 
   return [
-    initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.durationMid),
+    initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.motionDurationMid),
 
     {
       [`

components/alert/style/index.tsx

@@ -61,7 +61,7 @@ const genAlertTypeStyle = (
 export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
   const {
     alertCls,
-    duration,
+    motionDurationSlow: duration,
     marginXS,
     fontSize,
     fontSizeLG,
@@ -222,7 +222,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
   const {
     alertCls,
     iconPrefixCls,
-    duration,
+    motionDurationSlow: duration,
     marginXS,
     fontSizeSM,
     alertCloseColor,
@@ -280,7 +280,7 @@ export default function useStyle(
 
   const alertCls = `.${prefixCls}`;
 
-  const alertMessageColor = token.headingColor;
+  const alertMessageColor = token.colorTextHeading;
   const alertCloseColor = token.colorTextSecondary;
   const alertCloseHoverColor = token.iconColorHover;
   // FIXME

components/badge/style/index.tsx

@@ -111,7 +111,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
         textAlign: 'center',
         background: token.badgeColor,
         borderRadius: token.badgeHeight / 2,
-        boxShadow: `0 0 0 1px ${token.componentBackground}`,
+        boxShadow: `0 0 0 1px ${token.colorBgComponent}`,
         a: {
           color: token.badgeTextColor,
         },
@@ -139,7 +139,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
         height: token.badgeDotSize,
         background: token.badgeColor,
         borderRadius: '100%',
-        boxShadow: `0 0 0 1px ${token.componentBackground}`,
+        boxShadow: `0 0 0 1px ${token.colorBgComponent}`,
       },
       [`.${badgePrefixCls}-dot.${numberPrefixCls}`]: {
         transition: 'background 1.5s', // FIXME: hard code, copied from old less file
@@ -152,7 +152,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
         transformOrigin: '100% 0%',
         [`.${iconPrefixCls}-spin`]: {
           animation: `${antBadgeLoadingCircle.getName(hashId)} ${
-            token.durationFast
+            token.motionDurationFast
           } infinite linear`,
         },
       },
@@ -208,24 +208,26 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
         },
       },
       [`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: {
-        animation: `${antZoomBadgeIn.getName(hashId)} ${token.duration} ${token.motionEaseOutBack}`,
+        animation: `${antZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
+          token.motionEaseOutBack
+        }`,
         animationFillMode: 'both',
       },
       [`.${badgePrefixCls}-zoom-leave`]: {
-        animation: `${antZoomBadgeOut.getName(hashId)} ${token.duration} ${
+        animation: `${antZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
           token.motionEaseOutBack
         }`,
         animationFillMode: 'both',
       },
       [`&.${badgePrefixCls}-not-a-wrapper`]: {
         [`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: {
-          animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.duration} ${
+          animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
             token.motionEaseOutBack
           }`,
         },
 
         [`.${badgePrefixCls}-zoom-leave`]: {
-          animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.duration} ${
+          animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
             token.motionEaseOutBack
           }`,
         },
@@ -249,7 +251,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
           position: 'relative',
           display: 'inline-block',
           height: token.badgeHeight,
-          transition: `all ${token.duration} ${token.motionEaseOutBack}`,
+          transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
           WebkitTransformStyle: 'preserve-3d',
           WebkitBackfaceVisibility: 'hidden',
           [`> p.${numberPrefixCls}-only-unit`]: {
@@ -332,7 +334,7 @@ export default function useStyle(
 
   const badgeZIndex = 'auto';
   const badgeHeight = 20; // FIXME: hard code
-  const badgeTextColor = token.componentBackground;
+  const badgeTextColor = token.colorBgComponent;
   const badgeFontWeight = 'normal';
   const badgeFontSize = token.fontSizeSM;
   const badgeColor = token.highlightColor;

components/button/style/index.tsx

@@ -25,7 +25,7 @@ const genSharedButtonStyle = (
   backgroundColor: 'transparent',
   border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
   cursor: 'pointer',
-  transition: `all ${token.duration} ${token.motionEaseInOut}`,
+  transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
   userSelect: 'none',
   touchAction: 'manipulation',
   lineHeight: token.lineHeight,
@@ -93,7 +93,7 @@ const genSolidDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
     cursor: 'not-allowed',
     borderColor: token.colorBorder,
     color: token.colorTextDisabled,
-    backgroundColor: token.componentBackgroundDisabled,
+    backgroundColor: token.colorBgComponentDisabled,
     boxShadow: 'none',
   },
 });
@@ -115,26 +115,26 @@ const genPureDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
 const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
   ...genSolidButtonStyle(token),
 
-  backgroundColor: token.componentBackground,
+  backgroundColor: token.colorBgComponent,
   borderColor: token.colorBorder,
 
   boxShadow: '0 2px 0 rgba(0, 0, 0, 0.015)',
 
   ...genHoverActiveButtonStyle(
     {
-      color: token.primaryHoverColor,
+      color: token.colorPrimaryHover,
-      borderColor: token.primaryHoverColor,
+      borderColor: token.colorPrimaryHover,
     },
     {
-      color: token.primaryActiveColor,
+      color: token.colorPrimaryActive,
-      borderColor: token.primaryActiveColor,
+      borderColor: token.colorPrimaryActive,
     },
   ),
 
   ...genGhostButtonStyle(
     prefixCls,
-    token.componentBackground,
+    token.colorBgComponent,
-    token.componentBackground,
+    token.colorBgComponent,
     token.colorTextDisabled,
     token.colorBorder,
   ),
@@ -145,12 +145,12 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
 
     ...genHoverActiveButtonStyle(
       {
-        color: token.errorHoverColor,
+        color: token.colorErrorHover,
-        borderColor: token.errorHoverColor,
+        borderColor: token.colorErrorHover,
       },
       {
-        color: token.errorActiveColor,
+        color: token.colorErrorActive,
-        borderColor: token.errorActiveColor,
+        borderColor: token.colorErrorActive,
       },
     ),
 
@@ -176,10 +176,10 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
 
   ...genHoverActiveButtonStyle(
     {
-      backgroundColor: token.primaryHoverColor,
+      backgroundColor: token.colorPrimaryHover,
     },
     {
-      backgroundColor: token.primaryActiveColor,
+      backgroundColor: token.colorPrimaryActive,
     },
   ),
 
@@ -196,10 +196,10 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
 
     ...genHoverActiveButtonStyle(
       {
-        backgroundColor: token.errorHoverColor,
+        backgroundColor: token.colorErrorHover,
       },
       {
-        backgroundColor: token.errorActiveColor,
+        backgroundColor: token.colorErrorActive,
       },
     ),
 
@@ -227,10 +227,10 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec
 
   ...genHoverActiveButtonStyle(
     {
-      color: token.primaryHoverColor,
+      color: token.colorPrimaryHover,
     },
     {
-      color: token.primaryActiveColor,
+      color: token.colorPrimaryActive,
     },
   ),
 
@@ -241,10 +241,10 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec
 
     ...genHoverActiveButtonStyle(
       {
-        color: token.errorHoverColor,
+        color: token.colorErrorHover,
       },
       {
-        color: token.errorActiveColor,
+        color: token.colorErrorActive,
       },
     ),
 
@@ -327,7 +327,7 @@ const genSizeButtonStyle = (
         },
 
         [`.${prefixCls}-loading-icon`]: {
-          transition: `width ${token.duration} ${token.motionEaseInOut}, opacity ${token.duration} ${token.motionEaseInOut}`,
+          transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
         },
 
         [`&:not(${iconOnlyCls}) .${prefixCls}-loading-icon > .${iconPrefixCls}`]: {

components/cascader/style/index.tsx

@@ -103,10 +103,10 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
                 whiteSpace: 'nowrap',
                 textOverflow: 'ellipsis',
                 cursor: 'pointer',
-                transition: `all ${token.duration}`,
+                transition: `all ${token.motionDurationSlow}`,
 
                 '&:hover': {
-                  background: token.itemHoverBackground,
+                  background: token.controlItemBgHover,
                 },
                 ' &-disabled': {
                   color: token.colorTextDisabled,
@@ -124,7 +124,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
                 [`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
                   [`&, &:hover`]: {
                     fontWeight: 600, // FIXME: hardcode
-                    backgroundColor: token.itemActiveBackground,
+                    backgroundColor: token.controlItemBgActive,
                   },
                 },
 

components/checkbox/style/index.tsx

@@ -94,11 +94,11 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
           width: token.fontSizeLG,
           height: token.fontSizeLG,
           direction: 'ltr',
-          backgroundColor: token.componentBackground,
+          backgroundColor: token.colorBgComponent,
           border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
           borderRadius: token.controlRadius,
           borderCollapse: 'separate',
-          transition: `all ${token.duration}`,
+          transition: `all ${token.motionDurationSlow}`,
 
           '&:after': {
             position: 'absolute',
@@ -107,12 +107,12 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
             display: 'table',
             width: (token.fontSizeLG / 14) * 5,
             height: (token.fontSizeLG / 14) * 8,
-            border: `2px solid ${token.componentBackground}`,
+            border: `2px solid ${token.colorBgComponent}`,
             borderTop: 0,
             borderInlineStart: 0,
             transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
             opacity: 0,
-            transition: `all ${token.durationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.durationFast}`,
+            transition: `all ${token.motionDurationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.motionDurationFast}`,
             content: '""',
           },
         },
@@ -177,7 +177,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
           '&:after': {
             opacity: 1,
             transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
-            transition: `all ${token.duration} ${token.motionEaseOutBack} 0.1s`,
+            transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} 0.1s`,
           },
         },
 
@@ -191,7 +191,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
           border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
           borderRadius: token.controlRadius,
           visibility: 'hidden',
-          animation: `${antCheckboxEffect.getName(hashId)} ${token.duration} ease-in-out`,
+          animation: `${antCheckboxEffect.getName(hashId)} ${token.motionDurationSlow} ease-in-out`,
           animationFillMode: 'backwards',
           content: '""',
         },
@@ -214,7 +214,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
 
         // Wrapper > Checkbox > inner
         [`${checkboxCls}-inner`]: {
-          background: token.background,
+          background: token.colorBgContainer,
           borderColor: token.colorBorder,
 
           '&:after': {

components/config-provider/index.tsx

@@ -21,7 +21,7 @@ import notification from '../notification';
 import { RequiredMark } from '../form/Form';
 import { registerTheme } from './cssVariables';
 import defaultLocale from '../locale/default';
-import { SeedToken, DesignTokenContext } from '../_util/theme';
+import { SeedToken, DesignTokenContext, useToken } from '../_util/theme';
 import defaultSeedToken from '../_util/theme/themes/default';
 
 export {
@@ -284,6 +284,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
   ConfigContext: typeof ConfigContext;
   SizeContext: typeof SizeContext;
   config: typeof setGlobalConfig;
+  useToken: typeof useToken;
 } = props => {
   React.useEffect(() => {
     if (props.direction) {
@@ -316,5 +317,6 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
 ConfigProvider.ConfigContext = ConfigContext;
 ConfigProvider.SizeContext = SizeContext;
 ConfigProvider.config = setGlobalConfig;
+ConfigProvider.useToken = useToken;
 
 export default ConfigProvider;

components/divider/style/index.tsx

@@ -54,7 +54,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
       '&-horizontal&-with-text': {
         display: 'flex',
         margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
-        color: token.headingColor,
+        color: token.colorTextHeading,
         fontWeight: 500,
         fontSize: token.fontSizeLG,
         whiteSpace: 'nowrap',

components/image/style/index.tsx

@@ -45,7 +45,8 @@ export const genBoxStyle = (position?: PositionType): CSSObject => ({
 });
 
 export const genImageMaskStyle = (token: ImageToken): CSSObject => {
-  const { iconPrefixCls, white, black, duration, paddingXXS, marginXXS, prefixCls } = token;
+  const { iconPrefixCls, white, black, motionDurationSlow, paddingXXS, marginXXS, prefixCls } =
+    token;
   return {
     position: 'absolute',
     inset: 0,
@@ -56,7 +57,7 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
     background: new TinyColor(black).setAlpha(0.5).toRgbString(), // FIXME: hard code in v4
     cursor: 'pointer',
     opacity: 0,
-    transition: `opacity ${duration}`,
+    transition: `opacity ${motionDurationSlow}`,
 
     [`.${prefixCls}-mask-info`]: {
       padding: `0 ${paddingXXS}`,
@@ -158,7 +159,8 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
 };
 
 export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
-  const { motionEaseOut, previewPrefixCls, switchRight, switchLeft, width1px, duration } = token;
+  const { motionEaseOut, previewPrefixCls, switchRight, switchLeft, width1px, motionDurationSlow } =
+    token;
   return {
     height: '100%',
     textAlign: 'center',
@@ -173,13 +175,13 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
       verticalAlign: 'middle',
       transform: 'scale3d(1, 1, 1)',
       cursor: 'grab',
-      transition: `transform ${duration} ${motionEaseOut} 0s`,
+      transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
       userSelect: 'none',
       pointerEvents: 'auto',
 
       '&-wrapper': {
         ...genBoxStyle(),
-        transition: `transform ${duration} ${motionEaseOut} 0s`,
+        transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
 
         '&::before': {
           display: 'inline-block',
@@ -227,7 +229,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
     previewPrefixCls,
     imageBg,
     zIndexImage,
-    duration,
+    motionDurationSlow,
   } = token;
   return {
     // ============================== image ==============================
@@ -264,7 +266,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
       {
         transform: 'none',
         opacity: 0,
-        animationDuration: duration,
+        animationDuration: motionDurationSlow,
         userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777
       },
     [`.${previewPrefixCls}-root`]: {

components/input-number/style/index.tsx

@@ -37,15 +37,15 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
     colorError,
     paddingXS,
     colorTextSecondary: textColorSecondary,
-    durationFast,
+    motionDurationFast: durationFast,
     inputNumberHandlerActiveBgColor,
     colorPrimary,
     marginXXS,
     controlHeight,
     inputPaddingHorizontal,
-    duration,
+    motionDurationSlow: duration,
-    componentBackground,
+    colorBgComponent: componentBackground,
-    durationMid,
+    motionDurationMid: durationMid,
     colorTextDisabled: textColorDisabled,
   } = token;
 

components/input/style/index.tsx

@@ -47,14 +47,14 @@ export const genHoverStyle = (token: InputToken): CSSObject => ({
 
 export const genActiveStyle = (token: InputToken) => ({
   borderColor: token.inputBorderHoverColor,
-  boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.primaryOutlineColor}`,
+  boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
   borderInlineEndWidth: token.controlLineWidth,
   outline: 0,
 });
 
 export const genDisabledStyle = (token: InputToken): CSSObject => ({
   color: token.colorTextDisabled,
-  backgroundColor: token.componentBackgroundDisabled,
+  backgroundColor: token.colorBgComponentDisabled,
   borderColor: token.colorBorder,
   boxShadow: 'none',
   cursor: 'not-allowed',
@@ -79,7 +79,7 @@ const genInputSmallStyle = (token: InputToken): CSSObject => ({
 });
 
 export const genStatusStyle = (token: InputToken): CSSObject => {
-  const { prefixCls, colorError, colorWarning, errorOutlineColor, warningOutlineColor } = token;
+  const { prefixCls, colorError, colorWarning, colorErrorOutline, colorWarningOutline } = token;
 
   return {
     '&-status-error:not(&-disabled):not(&-borderless)&': {
@@ -92,7 +92,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
           ...token,
           inputBorderActiveColor: colorError,
           inputBorderHoverColor: colorError,
-          primaryOutlineColor: errorOutlineColor,
+          colorPrimaryOutline: colorErrorOutline,
         }),
       },
 
@@ -110,7 +110,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
           ...token,
           inputBorderActiveColor: colorWarning,
           inputBorderHoverColor: colorWarning,
-          primaryOutlineColor: warningOutlineColor,
+          colorPrimaryOutline: colorWarningOutline,
         }),
       },
 
@@ -130,13 +130,13 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
   color: token.colorText,
   fontSize: token.fontSize,
   lineHeight: token.lineHeight,
-  backgroundColor: token.componentBackground,
+  backgroundColor: token.colorBgComponent,
   backgroundImage: 'none',
   borderWidth: token.controlLineWidth,
   borderStyle: token.controlLineType,
   borderColor: token.colorBorder,
   borderRadius: token.controlRadius,
-  transition: `all ${token.duration}`,
+  transition: `all ${token.motionDurationSlow}`,
   ...genPlaceholderStyle(),
 
   '&:hover': {
@@ -166,7 +166,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
     minHeight: token.controlHeight,
     lineHeight: token.lineHeight,
     verticalAlign: 'bottom',
-    transition: `all ${token.duration}, height 0s`,
+    transition: `all ${token.motionDurationSlow}, height 0s`,
   },
 
   '&-textarea': {
@@ -259,7 +259,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
         backgroundColor: token.backgroundLight,
         border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
         borderRadius: token.controlRadius,
-        transition: `all ${token.duration}`,
+        transition: `all ${token.motionDurationSlow}`,
 
         // Reset Select's style in addon
         '.ant-select': {
@@ -542,7 +542,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
       // https://github.com/ant-design/ant-design/pull/18151
       // https://codesandbox.io/s/wizardly-sun-u10br
       cursor: 'pointer',
-      transition: `color ${token.duration}`,
+      transition: `color ${token.motionDurationSlow}`,
 
       '&:hover': {
         color: token.colorTextSecondary,
@@ -582,7 +582,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
     iconPrefixCls,
     inputAffixMargin,
     colorTextSecondary: textColorSecondary,
-    duration,
+    motionDurationSlow: duration,
     iconColorHover,
     colorPrimary,
     colorSuccess,
@@ -730,11 +730,11 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
     [searchPrefixCls]: {
       [`.${prefixCls}`]: {
         '&:hover, &:focus': {
-          borderColor: token.primaryHoverColor,
+          borderColor: token.colorPrimaryHover,
 
           [`+ .${prefixCls}-group-addon ${searchPrefixCls}-button:not(.@{ant-prefix}-btn-primary)`]:
             {
-              borderInlineStartColor: token.primaryHoverColor,
+              borderInlineStartColor: token.colorPrimaryHover,
             },
         },
       },
@@ -823,8 +823,8 @@ export const initInputToken = (
     0,
   ),
   inputPaddingHorizontal: token.paddingSM - token.controlLineWidth,
-  inputBorderHoverColor: token.primaryHoverColor,
+  inputBorderHoverColor: token.colorPrimaryHover,
-  inputBorderActiveColor: token.primaryHoverColor,
+  inputBorderActiveColor: token.colorPrimaryHover,
 });
 
 const genTextAreaStyle: GenerateStyle<InputToken> = token => {

components/mentions/style/index.tsx

@@ -24,16 +24,16 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
     mentionsCls,
     backgroundLight,
     colorTextDisabled: textColorDisabled,
-    itemHoverBackground,
+    controlItemBgHover: itemHoverBackground,
     controlPaddingHorizontal,
     colorText: textColor,
-    duration,
+    motionDurationSlow: duration,
     lineHeight,
     controlHeight,
     inputPaddingHorizontal,
     inputPaddingVertical,
     fontSize,
-    componentBackground,
+    colorBgComponent: componentBackground,
     controlRadius: borderRadius,
     boxShadow,
   } = token;

components/rate/style/index.tsx

@@ -32,7 +32,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
       },
 
       '> div': {
-        transition: `all ${token.duration}, outline 0s`,
+        transition: `all ${token.motionDurationSlow}, outline 0s`,
 
         '&:hover': {
           transform: token.rateStarHoverScale,
@@ -50,7 +50,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
 
       '&-first, &-second': {
         color: token.colorSplit,
-        transition: `all ${token.duration}`,
+        transition: `all ${token.motionDurationSlow}`,
         userSelect: 'none',
 
         [token.iconPrefixCls]: {

components/result/style/index.tsx

@@ -57,7 +57,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
     },
 
     [`${resultCls} ${resultCls}-title`]: {
-      color: token.headingColor,
+      color: token.colorTextHeading,
       fontSize: token.resultTitleFontSize,
       // FIXME: hard code
       lineHeight: 1.8,

components/select/style/dropdown.tsx

@@ -49,7 +49,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
         // https://github.com/ant-design/ant-design/issues/11456
         // https://github.com/ant-design/ant-design/issues/11843
         fontVariant: 'initial',
-        backgroundColor: token.componentBackground,
+        backgroundColor: token.colorBgComponent,
         borderRadius: token.controlRadius,
         outline: 'none',
         boxShadow: token.boxShadow,
@@ -93,7 +93,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
         [`${selectItemCls}`]: {
           ...genItemStyle(token),
           cursor: 'pointer',
-          transition: `background ${token.duration} ease`,
+          transition: `background ${token.motionDurationSlow} ease`,
 
           // =========== Group ============
           '&-group': {
@@ -118,13 +118,13 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
             },
 
             [`&-active:not(${selectItemCls}-option-disabled)`]: {
-              backgroundColor: token.itemHoverBackground,
+              backgroundColor: token.controlItemBgHover,
             },
 
             [`&-selected:not(${selectItemCls}-option-disabled)`]: {
               color: token.colorText,
               fontWeight: 600, // FIXME: Need design token?
-              backgroundColor: token.itemActiveBackground,
+              backgroundColor: token.controlItemBgActive,
 
               [`${selectItemCls}-option-state`]: {
                 color: token.colorPrimary,
@@ -132,7 +132,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
             },
             '&-disabled': {
               [`&${selectItemCls}-option-selected`]: {
-                backgroundColor: token.componentBackgroundDisabled,
+                backgroundColor: token.colorBgComponentDisabled,
               },
 
               color: token.colorTextDisabled,

components/select/style/index.tsx

@@ -33,10 +33,10 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
 
   return {
     position: 'relative',
-    backgroundColor: token.componentBackground,
+    backgroundColor: token.colorBgComponent,
     border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
     borderRadius: token.controlRadius,
-    transition: `all ${token.duration} ${token.motionEaseInOut}`,
+    transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
 
     input: {
       cursor: 'pointer',
@@ -52,11 +52,11 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
 
     [`${selectCls}-disabled&`]: {
       color: token.colorTextDisabled,
-      background: token.componentBackgroundDisabled,
+      background: token.colorBgComponentDisabled,
       cursor: 'not-allowed',
 
       [`${selectCls}-multiple&`]: {
-        background: token.componentBackgroundDisabled,
+        background: token.colorBgComponentDisabled,
       },
 
       input: {
@@ -165,7 +165,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
       [`${selectCls}-selection-placeholder`]: {
         flex: 1,
         overflow: 'hidden',
-        color: token.placeholderColor,
+        color: token.colorPlaceholder,
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         pointerEvents: 'none',
@@ -189,7 +189,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
 
         [`.${iconPrefixCls}`]: {
           verticalAlign: 'top',
-          transition: `transform ${token.duration}`,
+          transition: `transform ${token.motionDurationSlow}`,
 
           '> svg': {
             verticalAlign: 'top',
@@ -222,10 +222,10 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
         lineHeight: 1,
         textAlign: 'center',
         textTransform: 'none',
-        background: token.componentBackground,
+        background: token.colorBgComponent,
         cursor: 'pointer',
         opacity: 0,
-        transition: `color ${token.duration} ease, opacity ${token.duration} ease`,
+        transition: `color ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`,
         textRendering: 'auto',
 
         '&:before': {
@@ -257,7 +257,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
         fontSize: token.fontSize,
         textAlign: 'center',
         visibility: 'visible',
-        animation: `zoomIn ${token.duration} ${token.motionEaseOutBack}`,
+        animation: `zoomIn ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
         pointerEvents: 'none',
 
         '&:not(:first-child)': {
@@ -331,15 +331,15 @@ const genSelectStyle = (
     // =====================================================
     genStatusStyle(selectCls, {
       ...selectToken,
-      borderHoverColor: token.primaryHoverColor,
+      borderHoverColor: token.colorPrimaryHover,
-      outlineColor: token.primaryOutlineColor,
+      outlineColor: token.colorPrimaryOutline,
     }),
     genStatusStyle(
       `${selectCls}-status-error`,
       {
         ...selectToken,
-        borderHoverColor: token.errorHoverColor,
+        borderHoverColor: token.colorErrorHover,
-        outlineColor: token.errorOutlineColor,
+        outlineColor: token.colorErrorOutline,
       },
       true,
     ),
@@ -347,8 +347,8 @@ const genSelectStyle = (
       `${selectCls}-status-warning`,
       {
         ...selectToken,
-        borderHoverColor: token.warningHoverColor,
+        borderHoverColor: token.colorWarningHover,
-        outlineColor: token.warningOutlineColor,
+        outlineColor: token.colorWarningOutline,
       },
       true,
     ),

components/select/style/multiple.tsx

@@ -61,7 +61,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         },
 
         [`${selectCls}-disabled&`]: {
-          background: token.componentBackgroundDisabled,
+          background: token.colorBgComponentDisabled,
           cursor: 'not-allowed',
         },
 
@@ -92,11 +92,11 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         marginTop: FIXED_ITEM_MARGIN,
         marginBottom: FIXED_ITEM_MARGIN,
         lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`,
-        background: token.background,
+        background: token.colorBgContainer,
         border: `${token.controlLineWidth}px solid ${token.colorSplit}`,
         borderRadius: token.controlRadius,
         cursor: 'default',
-        transition: `font-size ${token.duration}, line-height ${token.duration}, height ${token.duration}`,
+        transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
         userSelect: 'none',
         marginInlineEnd: FIXED_ITEM_MARGIN * 2,
         paddingInlineStart: token.paddingXS,
@@ -158,7 +158,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
           height: selectItemHeight,
           fontFamily: token.fontFamily,
           lineHeight: `${selectItemHeight}px`,
-          transition: `all ${token.duration}`,
+          transition: `all ${token.motionDurationSlow}`,
         },
 
         '&-input': {
@@ -184,7 +184,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         insetInlineStart: token.inputPaddingHorizontalBase,
         insetInlineEnd: token.inputPaddingHorizontalBase,
         transform: 'translateY(-50%)',
-        transition: `all ${token.duration}`,
+        transition: `all ${token.motionDurationSlow}`,
       },
     },
   };

components/select/style/single.tsx

@@ -35,7 +35,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         `]: {
           padding: 0,
           lineHeight: `${selectHeightWithoutBorder}px`,
-          transition: `all ${token.duration}`,
+          transition: `all ${token.motionDurationSlow}`,
 
           // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
           '@supports (-moz-appearance: meterbar) &': {
@@ -77,7 +77,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 
       // Opacity selection if open
       [`&${selectCls}-open ${selectCls}-selection-item`]: {
-        color: token.placeholderColor,
+        color: token.colorPlaceholder,
       },
 
       // ========================== Input ==========================

components/slider/style/index.tsx

@@ -46,31 +46,31 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
 
       [`${sliderCls}-rail`]: {
         position: 'absolute',
-        backgroundColor: token.background,
+        backgroundColor: token.colorBgContainer,
         borderRadius: token.controlRadius,
-        transition: `background-color ${token.duration}`,
+        transition: `background-color ${token.motionDurationSlow}`,
       },
 
       [`${sliderCls}-track`]: {
         position: 'absolute',
         backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3
         borderRadius: token.controlRadius,
-        transition: `background-color ${token.duration}`,
+        transition: `background-color ${token.motionDurationSlow}`,
       },
 
       [`${sliderCls}-handle`]: {
         position: 'absolute',
         width: token.handleSize,
         height: token.handleSize,
-        backgroundColor: token.componentBackground,
+        backgroundColor: token.colorBgComponent,
         border: `2px solid ${token.tmpPrimaryColorWeak}`,
         borderRadius: '50%',
         boxShadow: 'none',
         cursor: 'pointer',
         transition: `
-          border-color ${token.duration},
+          border-color ${token.motionDurationSlow},
-          box-shadow ${token.duration},
+          box-shadow ${token.motionDurationSlow},
-          transform ${token.duration} cubic-bezier(0.18, 0.89, 0.32, 1.28)
+          transform ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28)
         `,
         outline: 'none',
 
@@ -79,13 +79,13 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         },
 
         '&:focus': {
-          borderColor: token.primaryHoverColor,
+          borderColor: token.colorPrimaryHover,
           boxShadow: 'none',
         },
 
         '&:focus-visible': {
           // FIXME: This is a inline color calculation
-          boxShadow: `0 0 0 5px ${new TinyColor(token.primaryHoverColor)
+          boxShadow: `0 0 0 5px ${new TinyColor(token.colorPrimaryHover)
             .setAlpha(0.2)
             .toRgbString()}`,
         },
@@ -102,7 +102,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         },
 
         [`${sliderCls}-track`]: {
-          backgroundColor: token.primaryHoverColor, // FIXME: origin primary-4
+          backgroundColor: token.colorPrimaryHover, // FIXME: origin primary-4
         },
 
         [`${sliderCls}-dot`]: {
@@ -118,7 +118,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
           ${sliderCls}-handle,
           ${sliderCls}-dot-active
         `]: {
-          borderColor: token.primaryHoverColor,
+          borderColor: token.colorPrimaryHover,
         },
       },
 
@@ -151,11 +151,11 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         position: 'absolute',
         width: dotSize,
         height: dotSize,
-        backgroundColor: token.componentBackground,
+        backgroundColor: token.colorBgComponent,
         border: `2px solid ${token.colorSplit}`, // FIXME: hardcode in v4
         borderRadius: '50%',
         cursor: 'pointer',
-        transition: `border-color ${token.duration}`,
+        transition: `border-color ${token.motionDurationSlow}`,
 
         '&-active': {
           borderColor: token.tmpPrimaryColorWeak,
@@ -166,7 +166,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         cursor: 'not-allowed',
 
         [`${sliderCls}-rail`]: {
-          backgroundColor: `${token.background} !important`,
+          backgroundColor: `${token.colorBgContainer} !important`,
         },
 
         [`${sliderCls}-track`]: {
@@ -177,7 +177,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
           ${sliderCls}-handle,
           ${sliderCls}-dot
         `]: {
-          backgroundColor: token.componentBackground,
+          backgroundColor: token.colorBgComponent,
           borderColor: `${token.colorTextDisabled} !important`,
           boxShadow: 'none',
           cursor: 'not-allowed',

components/statistic/style/index.tsx

@@ -25,7 +25,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
       fontSize: token.statisticTitleFontSize,
     },
     [`${token.statisticCls}-content`]: {
-      color: token.headingColor,
+      color: token.colorTextHeading,
       fontSize: token.statisticContentFontSize,
       fontFamily: token.statisticFontFamily,
       [`${token.statisticCls}-content-value`]: {

components/switch/style/index.tsx

@@ -241,7 +241,7 @@ export default function useStyle(
     switchInnerMarginMax: Math.ceil(switchHeight * 1.1),
     switchPadding: 2,
     switchPinSize: switchHeight - 4,
-    switchBg: token.componentBackground,
+    switchBg: token.colorBgComponent,
     switchShadowColor: new TinyColor('#00230b').setAlpha(0.2).toRgbString(),
     switchMinWidthSM: 28,
     switchHeightSM,

components/tag/style/index.tsx

@@ -81,7 +81,7 @@ const genBaseStyle = (
     borderRadius: token.controlRadius,
     // FIXME: hard code
     opacity: 1,
-    transition: `all ${token.duration}`,
+    transition: `all ${token.motionDurationSlow}`,
 
     // RTL
     '&&-rtl': {
@@ -100,10 +100,10 @@ const genBaseStyle = (
       // FIXME: hard code
       fontSize: 10,
       cursor: 'pointer',
-      transition: `all ${token.duration}`,
+      transition: `all ${token.motionDurationSlow}`,
 
       '&:hover': {
-        color: token.headingColor,
+        color: token.colorTextHeading,
       },
     },
 

components/tree/style/index.tsx

@@ -30,7 +30,7 @@ const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject =>
     verticalAlign: 'baseline',
 
     svg: {
-      transition: `transform ${token.duration}`,
+      transition: `transform ${token.motionDurationSlow}`,
     },
   },
 });
@@ -77,9 +77,9 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
   return {
     [treeCls]: {
       ...resetComponent(token),
-      background: token.componentBackground,
+      background: token.colorBgComponent,
       borderRadius: token.controlRadius,
-      transition: `background-color ${token.duration}`,
+      transition: `background-color ${token.motionDurationSlow}`,
 
       '&&-rtl': {
         // >>> Switcher
@@ -124,7 +124,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
               insetInlineStart: 0,
               border: `1px solid ${token.colorPrimary}`,
               opacity: 0,
-              animation: `${treeNodeFX.getName(hashId)} ${token.duration}`,
+              animation: `${treeNodeFX.getName(hashId)} ${token.motionDurationSlow}`,
               animationPlayState: 'running',
               animationFillMode: 'forwards',
               content: '""',
@@ -158,7 +158,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
         },
 
         [`&-active ${treeCls}-node-content-wrapper`]: {
-          background: token.itemHoverBackground,
+          background: token.controlItemBgHover,
         },
 
         [`&:not(&-disabled).filter-node ${treeCls}-title`]: {
@@ -184,7 +184,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
         lineHeight: `${treeTitleHeight}px`,
         textAlign: 'center',
         opacity: 0.2,
-        transition: `opacity ${token.duration}`,
+        transition: `opacity ${token.motionDurationSlow}`,
 
         [`${treeNodeCls}:hover &`]: {
           opacity: 0.45,
@@ -269,10 +269,10 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
         background: 'transparent',
         borderRadius: token.controlRadius,
         cursor: 'pointer',
-        transition: `all ${token.duration}, border 0s, line-height 0s, box-shadow 0s`,
+        transition: `all ${token.motionDurationSlow}, border 0s, line-height 0s, box-shadow 0s`,
 
         '&:hover': {
-          backgroundColor: token.itemHoverBackground,
+          backgroundColor: token.controlItemBgHover,
         },
 
         [`&${treeCls}-node-selected`]: {
@@ -340,7 +340,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
 
         // ============== Cover Background ==============
         [`${treeCls}-switcher`]: {
-          background: token.componentBackground,
+          background: token.colorBgComponent,
 
           '&-line-icon': {
             // https://github.com/ant-design/ant-design/issues/32813
@@ -381,14 +381,14 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
           insetInlineEnd: 0,
           bottom: treeNodePadding,
           insetInlineStart: 0,
-          transition: `background-color ${token.duration}`,
+          transition: `background-color ${token.motionDurationSlow}`,
           content: '""',
           pointerEvents: 'none',
         },
 
         '&:hover': {
           '&:before': {
-            background: token.itemHoverBackground,
+            background: token.controlItemBgHover,
           },
         },
 
@@ -399,7 +399,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
 
         // >>> Switcher
         [`${treeCls}-switcher`]: {
-          transition: `color ${token.duration}`,
+          transition: `color ${token.motionDurationSlow}`,
         },
 
         // >>> Title

components/typography/style/index.tsx

@@ -39,7 +39,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
       },
 
       '&&-disabled': {
-        color: token.disabledColor,
+        color: token.colorTextDisabled,
         cursor: 'not-allowed',
         userSelect: 'none',
       },

components/typography/style/mixins.tsx

@@ -57,7 +57,7 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token =
     ] = getTitleStyle({
       fontSize: token[`fontSizeHeading${headingLevel}`],
       lineHeight: token[`lineHeightHeading${headingLevel}`],
-      color: token.headingColor,
+      color: token.colorTextHeading,
       typographyToken: token.typography,
     });
   });
@@ -74,7 +74,7 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token =>
     },
 
     [`&[disabled], &.${token.typography.prefixCls}-disabled`]: {
-      color: token.disabledColor,
+      color: token.colorTextDisabled,
       cursor: 'not-allowed',
 
       '&:active, &:hover': {

site/theme/template/Layout/DynamicTheme/Preview.tsx

@@ -3,11 +3,52 @@ import * as React from 'react';
 import hljs from 'highlight.js';
 import css from 'highlight.js/lib/languages/css';
 import 'highlight.js/styles/github.css';
-import { Drawer, Typography, Alert, Space, Tabs } from 'antd';
+import { Drawer, Typography, Alert, Space, Tabs, ConfigProvider, Table, TableProps } from 'antd';
 import getValidateStatus, { STATUS, PASS } from './validateCheck';
 
 hljs.registerLanguage('css', css);
 
+const columns: TableProps<{ name: string; value: any }>['columns'] = [
+  {
+    dataIndex: 'name',
+    title: 'Name',
+    width: 1,
+  },
+  {
+    dataIndex: 'value',
+    title: 'Value',
+    render: (value: string) => {
+      let content: React.ReactNode = value;
+
+      switch (typeof value) {
+        case 'object': {
+          if (Array.isArray(value)) {
+            content = (
+              <ul style={{ margin: 0 }}>
+                {(value as string[]).map((val, index) => (
+                  <li key={index}>
+                    <Space size="large">
+                      <span style={{ userSelect: 'none' }}>[{index}]</span>
+                      {val}
+                    </Space>
+                  </li>
+                ))}
+              </ul>
+            );
+            break;
+          }
+        }
+
+        // eslint-disable-next-line no-fallthrough
+        default:
+          content = String(value);
+      }
+
+      return <span style={{ wordBreak: 'break-word' }}>{content}</span>;
+    },
+  },
+];
+
 export interface PreviewProps {
   visible: boolean;
   componentName: string;
@@ -17,6 +58,19 @@ export interface PreviewProps {
 export default function Preview({ visible, onClose }: PreviewProps) {
   const [styleList, setStyleList] = React.useState<string[]>([]);
 
+  // Full token
+  const [, token] = ConfigProvider.useToken();
+  const tokenList = React.useMemo(
+    () =>
+      Object.keys(token)
+        .filter(name => !name.startsWith('_'))
+        .map((name: keyof typeof token) => ({
+          name,
+          value: token[name],
+        })),
+    [token],
+  );
+
   React.useEffect(() => {
     const observer = new MutationObserver(() => {
       const latestStyles = Array.from(document.querySelectorAll('style[data-css-hash]'))
@@ -134,6 +188,16 @@ export default function Preview({ visible, onClose }: PreviewProps) {
             ))}
           </Typography>
         </Tabs.TabPane>
+        <Tabs.TabPane tab="Token" key="token">
+          <Table
+            dataSource={tokenList}
+            columns={columns}
+            rowKey="name"
+            bordered
+            size="small"
+            pagination={false}
+          />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="Analysis" key="analysis">
           <Space style={{ width: '100%' }} direction="vertical">
             {invalidateStyles.map(({ status, line, source }, index) => (