sync master to branch

.dumi/theme/builtins/Audio/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { SoundOutlined } from '@ant-design/icons';
+import { createStyles } from 'antd-style';
+
+const useStyle = createStyles(({ css, token }) => {
+  const { paddingXXS, fontSizeXL, motionDurationSlow, colorLink, colorLinkHover, colorLinkActive } =
+    token;
+  return {
+    playBtn: css`
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      column-gap: ${paddingXXS}px;
+      margin: 0;
+    `,
+    icon: css`
+      font-size: ${fontSizeXL}px;
+      color: ${colorLink};
+      transition: all ${motionDurationSlow};
+      &:hover {
+        color: ${colorLinkHover};
+      }
+      &:active {
+        color: ${colorLinkActive};
+      }
+    `,
+  };
+});
+
+interface AudioProps {
+  id?: string;
+}
+
+const AudioControl: React.FC<React.PropsWithChildren<AudioProps>> = ({ id, children }) => {
+  const { styles } = useStyle();
+  const onClick: React.MouseEventHandler<HTMLAnchorElement> = () => {
+    const audio = document.querySelector<HTMLAudioElement>(`#${id}`);
+    audio?.play();
+  };
+  return (
+    <a className={styles.playBtn} onClick={onClick}>
+      {children}
+      <SoundOutlined className={styles.icon} />
+    </a>
+  );
+};
+
+export default AudioControl;

.dumi/theme/builtins/ComponentMeta/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { EditOutlined, GithubOutlined } from '@ant-design/icons';
+import { EditOutlined, GithubOutlined, HistoryOutlined } from '@ant-design/icons';
 import type { GetProp } from 'antd';
-import { Descriptions, theme, Tooltip, Typography } from 'antd';
+import { Descriptions, Flex, theme, Tooltip, Typography } from 'antd';
 import { createStyles, css } from 'antd-style';
 import kebabCase from 'lodash/kebabCase';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 import useLocale from '../../../hooks/useLocale';
+import ComponentChangelog from '../../common/ComponentChangelog';
 
 const locales = {
   cn: {
@@ -16,6 +17,7 @@ const locales = {
     source: '源码',
     docs: '文档',
     edit: '编辑此页',
+    changelog: '更新日志',
     version: '版本',
   },
   en: {
@@ -25,6 +27,7 @@ const locales = {
     source: 'Source',
     docs: 'Docs',
     edit: 'Edit this page',
+    changelog: 'Changelog',
     version: 'Version',
   },
 };
@@ -43,7 +46,7 @@ const useStyle = createStyles(({ token }) => ({
     align-items: center;
     column-gap: ${token.paddingXXS}px;
     border-radius: ${token.borderRadiusSM}px;
-    padding-inline: ${token.paddingXXS}px;
+    padding-inline: ${token.paddingXXS}px !important;
     transition: all ${token.motionDurationSlow} !important;
     font-family: ${token.codeFamily};
     color: ${token.colorTextSecondary} !important;
@@ -70,6 +73,9 @@ const useStyle = createStyles(({ token }) => ({
   semicolon: css`
     color: ${token.colorText};
   `,
+  icon: css`
+    margin-inline-end: ${token.marginXXS}px;
+  `,
 }));
 
 export interface ComponentMetaProps {
@@ -117,7 +123,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
   }, [component, source]);
 
   const transformComponentName = (componentName: string) => {
-    if (componentName === 'Notifiction' || componentName === 'Message') {
+    if (componentName === 'Notification' || componentName === 'Message') {
       return componentName.toLowerCase();
     }
     return componentName;
@@ -171,7 +177,7 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
             label: locale.source,
             children: (
               <Typography.Link className={styles.code} href={filledSource} target="_blank">
-                <GithubOutlined style={{ marginInlineEnd: 4 }} />
+                <GithubOutlined className={styles.icon} />
                 <span>{abbrSource}</span>
               </Typography.Link>
             ),
@@ -179,14 +185,22 @@ const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
           filename && {
             label: locale.docs,
             children: (
-              <Typography.Link
-                className={styles.code}
-                href={`${branchUrl}${filename}`}
-                target="_blank"
-              >
-                <EditOutlined style={{ marginInlineEnd: 4 }} />
-                <span>{locale.edit}</span>
-              </Typography.Link>
+              <Flex justify="flex-start" align="center" gap="middle">
+                <Typography.Link
+                  className={styles.code}
+                  href={`${branchUrl}${filename}`}
+                  target="_blank"
+                >
+                  <EditOutlined className={styles.icon} />
+                  <span>{locale.edit}</span>
+                </Typography.Link>
+                <ComponentChangelog>
+                  <Typography.Link className={styles.code}>
+                    <HistoryOutlined className={styles.icon} />
+                    <span>{locale.changelog}</span>
+                  </Typography.Link>
+                </ComponentChangelog>
+              </Flex>
             ),
           },
           isVersionNumber(version) && {

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -1,13 +1,6 @@
 import React, { useContext } from 'react';
-import {
-  BugFilled,
-  BugOutlined,
-  CodeFilled,
-  CodeOutlined,
-  ExperimentFilled,
-  ExperimentOutlined,
-} from '@ant-design/icons';
-import { ConfigProvider, Tooltip } from 'antd';
+import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';
+import { ConfigProvider, Tooltip, Button } from 'antd';
 import classNames from 'classnames';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
 
@@ -33,10 +26,6 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
   const [expandAll, setExpandAll] = useLayoutState(false);
   const [enableCssVar, setEnableCssVar] = useLayoutState(true);
 
-  const expandTriggerClass = classNames('code-box-expand-trigger', {
-    'code-box-expand-trigger-active': expandAll,
-  });
-
   const handleVisibleToggle = () => {
     setShowDebug?.(!showDebug);
   };
@@ -51,16 +40,13 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
 
   const demos = React.useMemo(
     () =>
-      items.reduce<typeof items>((acc, item) => {
+      items.map((item: any) => {
         const { previewerProps } = item;
         const { debug } = previewerProps;
-        if (debug && !showDebug) {
-          return acc;
-        }
-        return acc.concat({
+        return {
           ...item,
           previewerProps: {
-            ...previewerProps,
+            ...item.previewerProps,
             expand: expandAll,
             // always override debug property, because dumi will hide debug demo in production
             debug: false,
@@ -70,42 +56,52 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
              */
             originDebug: debug,
           },
-        });
-      }, []),
+        };
+      }),
     [expandAll, showDebug],
   );
 
   return (
-    <div className="demo-wrapper">
+    <div
+      className={classNames('demo-wrapper', {
+        'demo-wrapper-show-debug': showDebug,
+      })}
+    >
       <span className="all-code-box-controls">
         <Tooltip
           title={
             <FormattedMessage id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`} />
           }
         >
-          {expandAll ? (
-            <CodeFilled className={expandTriggerClass} onClick={handleExpandToggle} />
-          ) : (
-            <CodeOutlined className={expandTriggerClass} onClick={handleExpandToggle} />
-          )}
+          <Button
+            type="text"
+            size="small"
+            icon={<CodeOutlined />}
+            onClick={handleExpandToggle}
+            className={expandAll ? 'icon-enabled' : ''}
+          />
         </Tooltip>
         <Tooltip
           title={
             <FormattedMessage id={`app.component.examples.${showDebug ? 'hide' : 'visible'}`} />
           }
         >
-          {showDebug ? (
-            <BugFilled className={expandTriggerClass} onClick={handleVisibleToggle} />
-          ) : (
-            <BugOutlined className={expandTriggerClass} onClick={handleVisibleToggle} />
-          )}
+          <Button
+            type="text"
+            size="small"
+            icon={<BugOutlined />}
+            onClick={handleVisibleToggle}
+            className={showDebug ? 'icon-enabled' : ''}
+          />
         </Tooltip>
         <Tooltip title={enableCssVar ? locale.disableCssVar : locale.enableCssVar}>
-          {enableCssVar ? (
-            <ExperimentFilled className={expandTriggerClass} onClick={handleCssVarToggle} />
-          ) : (
-            <ExperimentOutlined className={expandTriggerClass} onClick={handleCssVarToggle} />
-          )}
+          <Button
+            type="text"
+            size="small"
+            icon={<ExperimentOutlined />}
+            onClick={handleCssVarToggle}
+            className={enableCssVar ? 'icon-enabled' : ''}
+          />
         </Tooltip>
       </span>
       <ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -108,7 +108,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     clientOnly,
     pkgDependencyList,
   } = props;
-  const { showDebug, codeType } = useContext(DemoContext);
+  const { codeType } = useContext(DemoContext);
 
   const { pkg } = useSiteData();
   const location = useLocation();
@@ -420,6 +420,26 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 </a>
               </Tooltip>
             )}
+            <form
+              className="code-box-code-action"
+              action="https://codesandbox.io/api/v1/sandboxes/define"
+              method="POST"
+              target="_blank"
+              ref={codeSandboxIconRef}
+              onClick={() => {
+                track({ type: 'codesandbox', demo: asset.id });
+                codeSandboxIconRef.current?.submit();
+              }}
+            >
+              <input
+                type="hidden"
+                name="parameters"
+                value={compress(JSON.stringify(codesanboxPrefillConfig))}
+              />
+              <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
+                <CodeSandboxIcon className="code-box-codesandbox" />
+              </Tooltip>
+            </form>
             {showRiddleButton ? (
               <form
                 className="code-box-code-action"
@@ -472,28 +492,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 <CodePenIcon className="code-box-codepen" />
               </Tooltip>
             </form>
-            {showDebug && (
-              <form
-                className="code-box-code-action"
-                action="https://codesandbox.io/api/v1/sandboxes/define"
-                method="POST"
-                target="_blank"
-                ref={codeSandboxIconRef}
-                onClick={() => {
-                  track({ type: 'codesandbox', demo: asset.id });
-                  codeSandboxIconRef.current?.submit();
-                }}
-              >
-                <input
-                  type="hidden"
-                  name="parameters"
-                  value={compress(JSON.stringify(codesanboxPrefillConfig))}
-                />
-                <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
-                  <CodeSandboxIcon className="code-box-codesandbox" />
-                </Tooltip>
-              </form>
-            )}
             <Tooltip title={<FormattedMessage id="app.demo.separate" />}>
               <a
                 className="code-box-code-action"

.dumi/theme/builtins/Previewer/index.tsx

@@ -1,12 +1,11 @@
 import React, { Suspense } from 'react';
 import { Alert, Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
+import Previewer from './Previewer';
 import type { IPreviewerProps } from 'dumi';
 
 const { ErrorBoundary } = Alert;
 
-const Previewer = React.lazy(() => import('./Previewer'));
-
 const useStyle = createStyles(({ token, css }) => ({
   skeletonWrapper: css`
     width: 100% !important;

.dumi/theme/common/BehaviorMap/BehaviorMap.tsx

@@ -1,185 +1,7 @@
 import React, { useEffect, useRef } from 'react';
-import G6 from '@antv/g6';
 import { createStyles, css } from 'antd-style';
 import { useRouteMeta } from 'dumi';
 
-G6.registerNode('behavior-start-node', {
-  draw: (cfg, group) => {
-    const textWidth = G6.Util.getTextSize(cfg!.label, 16)[0];
-    const size = [textWidth + 20 * 2, 48];
-    const keyShape = group!.addShape('rect', {
-      name: 'start-node',
-      attrs: {
-        width: size[0],
-        height: size[1],
-        y: -size[1] / 2,
-        radius: 8,
-        fill: '#fff',
-      },
-    });
-    group!.addShape('text', {
-      attrs: {
-        text: `${cfg!.label}`,
-        fill: 'rgba(0, 0, 0, 0.88)',
-        fontSize: 16,
-        fontWeight: 500,
-        x: 20,
-        textBaseline: 'middle',
-      },
-      name: 'start-node-text',
-    });
-    return keyShape;
-  },
-  getAnchorPoints() {
-    return [
-      [0, 0.5],
-      [1, 0.5],
-    ];
-  },
-});
-
-G6.registerNode(
-  'behavior-sub-node',
-  {
-    draw: (cfg, group) => {
-      const textWidth = G6.Util.getTextSize(cfg!.label, 14)[0];
-      const padding = 16;
-      const size = [textWidth + 16 * 2 + (cfg!.targetType ? 12 : 0) + (cfg!.link ? 20 : 0), 40];
-      const keyShape = group!.addShape('rect', {
-        name: 'sub-node',
-        attrs: {
-          width: size[0],
-          height: size[1],
-          y: -size[1] / 2,
-          radius: 8,
-          fill: '#fff',
-          cursor: 'pointer',
-        },
-      });
-      group!.addShape('text', {
-        attrs: {
-          text: `${cfg!.label}`,
-          x: cfg!.targetType ? 12 + 16 : padding,
-          fill: 'rgba(0, 0, 0, 0.88)',
-          fontSize: 14,
-          textBaseline: 'middle',
-          cursor: 'pointer',
-        },
-        name: 'sub-node-text',
-      });
-      if (cfg!.targetType) {
-        group!.addShape('rect', {
-          name: 'sub-node-type',
-          attrs: {
-            width: 8,
-            height: 8,
-            radius: 4,
-            y: -4,
-            x: 12,
-            fill: cfg!.targetType === 'mvp' ? '#1677ff' : '#A0A0A0',
-            cursor: 'pointer',
-          },
-        });
-      }
-      if (cfg!.children) {
-        const { length } = cfg!.children as any;
-        group!.addShape('rect', {
-          name: 'sub-node-children-length',
-          attrs: {
-            width: 20,
-            height: 20,
-            radius: 10,
-            y: -10,
-            x: size[0] - 4,
-            fill: '#404040',
-            cursor: 'pointer',
-          },
-        });
-        group!.addShape('text', {
-          name: 'sub-node-children-length-text',
-          attrs: {
-            text: `${length}`,
-            x: size[0] + 6 - G6.Util.getTextSize(`${length}`, 12)[0] / 2,
-            textBaseline: 'middle',
-            fill: '#fff',
-            fontSize: 12,
-            cursor: 'pointer',
-          },
-        });
-      }
-      if (cfg!.link) {
-        group!.addShape('dom', {
-          attrs: {
-            width: 16,
-            height: 16,
-            x: size[0] - 12 - 16,
-            y: -8,
-            cursor: 'pointer',
-            // DOM's html
-            html: `
-            <div style="width: 16px; height: 16px;">
-              <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                      <g id="DatePicker" transform="translate(-890.000000, -441.000000)" fill-rule="nonzero">
-                          <g id="编组-30" transform="translate(288.000000, 354.000000)">
-                              <g id="编组-7备份-7" transform="translate(522.000000, 79.000000)">
-                                  <g id="right-circle-outlinedd" transform="translate(80.000000, 8.000000)">
-                                      <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
-                                      <path d="M10.4171875,7.8984375 L6.5734375,5.1171875 C6.490625,5.0578125 6.375,5.115625 6.375,5.21875 L6.375,5.9515625 C6.375,6.1109375 6.4515625,6.2625 6.58125,6.35625 L8.853125,8 L6.58125,9.64375 C6.4515625,9.7375 6.375,9.8875 6.375,10.0484375 L6.375,10.78125 C6.375,10.8828125 6.490625,10.9421875 6.5734375,10.8828125 L10.4171875,8.1015625 C10.4859375,8.0515625 10.4859375,7.9484375 10.4171875,7.8984375 Z" id="路径" fill="#BFBFBF"></path>
-                                      <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z" id="形状" fill="#BFBFBF"></path>
-                                  </g>
-                              </g>
-                          </g>
-                      </g>
-                  </g>
-              </svg>
-            </div>
-          `,
-          },
-          // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
-          name: 'sub-node-link',
-        });
-      }
-      return keyShape;
-    },
-    getAnchorPoints() {
-      return [
-        [0, 0.5],
-        [1, 0.5],
-      ];
-    },
-    options: {
-      stateStyles: {
-        hover: {
-          stroke: '#1677ff',
-          'sub-node-link': {
-            html: `
-            <div style="width: 16px; height: 16px;">
-              <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                      <g id="DatePicker" transform="translate(-890.000000, -441.000000)" fill-rule="nonzero">
-                          <g id="编组-30" transform="translate(288.000000, 354.000000)">
-                              <g id="编组-7备份-7" transform="translate(522.000000, 79.000000)">
-                                  <g id="right-circle-outlinedd" transform="translate(80.000000, 8.000000)">
-                                      <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
-                                      <path d="M10.4171875,7.8984375 L6.5734375,5.1171875 C6.490625,5.0578125 6.375,5.115625 6.375,5.21875 L6.375,5.9515625 C6.375,6.1109375 6.4515625,6.2625 6.58125,6.35625 L8.853125,8 L6.58125,9.64375 C6.4515625,9.7375 6.375,9.8875 6.375,10.0484375 L6.375,10.78125 C6.375,10.8828125 6.490625,10.9421875 6.5734375,10.8828125 L10.4171875,8.1015625 C10.4859375,8.0515625 10.4859375,7.9484375 10.4171875,7.8984375 Z" id="路径" fill="#1677ff"></path>
-                                      <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z" id="形状" fill="#1677ff"></path>
-                                  </g>
-                              </g>
-                          </g>
-                      </g>
-                  </g>
-              </svg>
-            </div>
-          `,
-          },
-        },
-      },
-    },
-  },
-  'rect',
-);
-
 const dataTransform = (data: BehaviorMapItem) => {
   const changeData = (d: any, level = 0) => {
     const clonedData: any = {
@@ -275,48 +97,229 @@ const BehaviorMap: React.FC<BehaviorMapProps> = ({ data }) => {
   const meta = useRouteMeta();
 
   useEffect(() => {
-    const graph = new G6.TreeGraph({
-      container: ref.current!,
-      width: ref.current!.scrollWidth,
-      height: ref.current!.scrollHeight,
-      renderer: 'svg',
-      modes: {
-        default: ['collapse-expand', 'drag-canvas'],
-      },
-      defaultEdge: {
-        type: 'cubic-horizontal',
-        style: {
-          lineWidth: 1,
-          stroke: '#BFBFBF',
+    import('@antv/g6').then((G6) => {
+      G6.registerNode('behavior-start-node', {
+        draw: (cfg, group) => {
+          const textWidth = G6.Util.getTextSize(cfg!.label, 16)[0];
+          const size = [textWidth + 20 * 2, 48];
+          const keyShape = group!.addShape('rect', {
+            name: 'start-node',
+            attrs: {
+              width: size[0],
+              height: size[1],
+              y: -size[1] / 2,
+              radius: 8,
+              fill: '#fff',
+            },
+          });
+          group!.addShape('text', {
+            attrs: {
+              text: `${cfg!.label}`,
+              fill: 'rgba(0, 0, 0, 0.88)',
+              fontSize: 16,
+              fontWeight: 500,
+              x: 20,
+              textBaseline: 'middle',
+            },
+            name: 'start-node-text',
+          });
+          return keyShape;
         },
-      },
-      layout: {
-        type: 'mindmap',
-        direction: 'LR',
-        getHeight: () => 48,
-        getWidth: (node: any) => G6.Util.getTextSize(node.label, 16)[0] + 20 * 2,
-        getVGap: () => 10,
-        getHGap: () => 60,
-        getSide: (node: any) => node.data.direction,
-      },
-    });
+        getAnchorPoints() {
+          return [
+            [0, 0.5],
+            [1, 0.5],
+          ];
+        },
+      });
 
-    graph.on('node:mouseenter', (e) => {
-      graph.setItemState(e.item!, 'hover', true);
-    });
-    graph.on('node:mouseleave', (e) => {
-      graph.setItemState(e.item!, 'hover', false);
-    });
-    graph.on('node:click', (e) => {
-      const { link } = e.item!.getModel();
-      if (link) {
-        window.location.hash = link as string;
-      }
-    });
+      G6.registerNode(
+        'behavior-sub-node',
+        {
+          draw: (cfg, group) => {
+            const textWidth = G6.Util.getTextSize(cfg!.label, 14)[0];
+            const padding = 16;
+            const size = [
+              textWidth + 16 * 2 + (cfg!.targetType ? 12 : 0) + (cfg!.link ? 20 : 0),
+              40,
+            ];
+            const keyShape = group!.addShape('rect', {
+              name: 'sub-node',
+              attrs: {
+                width: size[0],
+                height: size[1],
+                y: -size[1] / 2,
+                radius: 8,
+                fill: '#fff',
+                cursor: 'pointer',
+              },
+            });
+            group!.addShape('text', {
+              attrs: {
+                text: `${cfg!.label}`,
+                x: cfg!.targetType ? 12 + 16 : padding,
+                fill: 'rgba(0, 0, 0, 0.88)',
+                fontSize: 14,
+                textBaseline: 'middle',
+                cursor: 'pointer',
+              },
+              name: 'sub-node-text',
+            });
+            if (cfg!.targetType) {
+              group!.addShape('rect', {
+                name: 'sub-node-type',
+                attrs: {
+                  width: 8,
+                  height: 8,
+                  radius: 4,
+                  y: -4,
+                  x: 12,
+                  fill: cfg!.targetType === 'mvp' ? '#1677ff' : '#A0A0A0',
+                  cursor: 'pointer',
+                },
+              });
+            }
+            if (cfg!.children) {
+              const { length } = cfg!.children as any;
+              group!.addShape('rect', {
+                name: 'sub-node-children-length',
+                attrs: {
+                  width: 20,
+                  height: 20,
+                  radius: 10,
+                  y: -10,
+                  x: size[0] - 4,
+                  fill: '#404040',
+                  cursor: 'pointer',
+                },
+              });
+              group!.addShape('text', {
+                name: 'sub-node-children-length-text',
+                attrs: {
+                  text: `${length}`,
+                  x: size[0] + 6 - G6.Util.getTextSize(`${length}`, 12)[0] / 2,
+                  textBaseline: 'middle',
+                  fill: '#fff',
+                  fontSize: 12,
+                  cursor: 'pointer',
+                },
+              });
+            }
+            if (cfg!.link) {
+              group!.addShape('dom', {
+                attrs: {
+                  width: 16,
+                  height: 16,
+                  x: size[0] - 12 - 16,
+                  y: -8,
+                  cursor: 'pointer',
+                  // DOM's html
+                  html: `
+                <div style="width: 16px; height: 16px;">
+                  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                          <g id="DatePicker" transform="translate(-890.000000, -441.000000)" fill-rule="nonzero">
+                              <g id="编组-30" transform="translate(288.000000, 354.000000)">
+                                  <g id="编组-7备份-7" transform="translate(522.000000, 79.000000)">
+                                      <g id="right-circle-outlinedd" transform="translate(80.000000, 8.000000)">
+                                          <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                                          <path d="M10.4171875,7.8984375 L6.5734375,5.1171875 C6.490625,5.0578125 6.375,5.115625 6.375,5.21875 L6.375,5.9515625 C6.375,6.1109375 6.4515625,6.2625 6.58125,6.35625 L8.853125,8 L6.58125,9.64375 C6.4515625,9.7375 6.375,9.8875 6.375,10.0484375 L6.375,10.78125 C6.375,10.8828125 6.490625,10.9421875 6.5734375,10.8828125 L10.4171875,8.1015625 C10.4859375,8.0515625 10.4859375,7.9484375 10.4171875,7.8984375 Z" id="路径" fill="#BFBFBF"></path>
+                                          <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z" id="形状" fill="#BFBFBF"></path>
+                                      </g>
+                                  </g>
+                              </g>
+                          </g>
+                      </g>
+                  </svg>
+                </div>
+              `,
+                },
+                // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
+                name: 'sub-node-link',
+              });
+            }
+            return keyShape;
+          },
+          getAnchorPoints() {
+            return [
+              [0, 0.5],
+              [1, 0.5],
+            ];
+          },
+          options: {
+            stateStyles: {
+              hover: {
+                stroke: '#1677ff',
+                'sub-node-link': {
+                  html: `
+                <div style="width: 16px; height: 16px;">
+                  <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                      <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                          <g id="DatePicker" transform="translate(-890.000000, -441.000000)" fill-rule="nonzero">
+                              <g id="编组-30" transform="translate(288.000000, 354.000000)">
+                                  <g id="编组-7备份-7" transform="translate(522.000000, 79.000000)">
+                                      <g id="right-circle-outlinedd" transform="translate(80.000000, 8.000000)">
+                                          <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                                          <path d="M10.4171875,7.8984375 L6.5734375,5.1171875 C6.490625,5.0578125 6.375,5.115625 6.375,5.21875 L6.375,5.9515625 C6.375,6.1109375 6.4515625,6.2625 6.58125,6.35625 L8.853125,8 L6.58125,9.64375 C6.4515625,9.7375 6.375,9.8875 6.375,10.0484375 L6.375,10.78125 C6.375,10.8828125 6.490625,10.9421875 6.5734375,10.8828125 L10.4171875,8.1015625 C10.4859375,8.0515625 10.4859375,7.9484375 10.4171875,7.8984375 Z" id="路径" fill="#1677ff"></path>
+                                          <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z" id="形状" fill="#1677ff"></path>
+                                      </g>
+                                  </g>
+                              </g>
+                          </g>
+                      </g>
+                  </svg>
+                </div>
+              `,
+                },
+              },
+            },
+          },
+        },
+        'rect',
+      );
+      const graph = new G6.TreeGraph({
+        container: ref.current!,
+        width: ref.current!.scrollWidth,
+        height: ref.current!.scrollHeight,
+        renderer: 'svg',
+        modes: {
+          default: ['collapse-expand', 'drag-canvas'],
+        },
+        defaultEdge: {
+          type: 'cubic-horizontal',
+          style: {
+            lineWidth: 1,
+            stroke: '#BFBFBF',
+          },
+        },
+        layout: {
+          type: 'mindmap',
+          direction: 'LR',
+          getHeight: () => 48,
+          getWidth: (node: any) => G6.Util.getTextSize(node.label, 16)[0] + 20 * 2,
+          getVGap: () => 10,
+          getHGap: () => 60,
+          getSide: (node: any) => node.data.direction,
+        },
+      });
 
-    graph.data(dataTransform(data));
-    graph.render();
-    graph.fitCenter();
+      graph.on('node:mouseenter', (e) => {
+        graph.setItemState(e.item!, 'hover', true);
+      });
+      graph.on('node:mouseleave', (e) => {
+        graph.setItemState(e.item!, 'hover', false);
+      });
+      graph.on('node:click', (e) => {
+        const { link } = e.item!.getModel();
+        if (link) {
+          window.location.hash = link as string;
+        }
+      });
+
+      graph.data(dataTransform(data));
+      graph.render();
+      graph.fitCenter();
+    });
   }, []);
 
   return (

.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { BugOutlined, HistoryOutlined } from '@ant-design/icons';
-import { Button, Drawer, Grid, Popover, Timeline, Typography } from 'antd';
+import React, { cloneElement, isValidElement } from 'react';
+import { BugOutlined } from '@ant-design/icons';
+import { Drawer, Flex, Grid, Popover, Tag, Timeline, Typography, Button } from 'antd';
 import type { TimelineItemProps } from 'antd';
 import { createStyles } from 'antd-style';
 import semver from 'semver';
@@ -8,6 +8,7 @@ import semver from 'semver';
 import deprecatedVersions from '../../../../BUG_VERSIONS.json';
 import useFetch from '../../../hooks/useFetch';
 import useLocale from '../../../hooks/useLocale';
+import useLocation from '../../../hooks/useLocation';
 import Link from '../Link';
 
 interface MatchDeprecatedResult {
@@ -15,6 +16,13 @@ interface MatchDeprecatedResult {
   reason: string[];
 }
 
+interface ChangelogInfo {
+  version: string;
+  changelog: string;
+  refs: string[];
+  releaseDate: string;
+}
+
 function matchDeprecated(v: string): MatchDeprecatedResult {
   const match = Object.keys(deprecatedVersions).find((depreciated) =>
     semver.satisfies(v, depreciated),
@@ -27,6 +35,11 @@ function matchDeprecated(v: string): MatchDeprecatedResult {
 }
 
 const useStyle = createStyles(({ token, css }) => ({
+  listWrap: css`
+    > li {
+      line-height: 2;
+    }
+  `,
   linkRef: css`
     margin-inline-start: ${token.marginXS}px;
   `,
@@ -66,12 +79,27 @@ const useStyle = createStyles(({ token, css }) => ({
       scrollbarColor: 'unset',
     },
   },
+  versionWrap: css`
+    margin-bottom: 1em;
+  `,
+  versionTitle: css`
+    height: 28px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    margin: 0 !important;
+  `,
+  versionTag: css`
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    &:last-child {
+      margin-inline-end: 0;
+    }
+  `,
 }));
 
-export interface ComponentChangelogProps {
-  pathname: string;
-}
-
 const locales = {
   cn: {
     full: '查看完整日志',
@@ -89,29 +117,37 @@ const locales = {
   },
 };
 
-const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any }> = (props) => {
-  const { changelog = '', refs = [], styles } = props;
+const ParseChangelog: React.FC<{ changelog: string }> = (props) => {
+  const { changelog = '' } = props;
 
   const parsedChangelog = React.useMemo(() => {
     const nodes: React.ReactNode[] = [];
 
     let isQuota = false;
+    let isBold = false;
     let lastStr = '';
 
     for (let i = 0; i < changelog.length; i += 1) {
       const char = changelog[i];
 
-      if (char !== '`') {
+      if (char !== '`' && char !== '*') {
         lastStr += char;
       } else {
         let node: React.ReactNode = lastStr;
         if (isQuota) {
           node = <code>{node}</code>;
+        } else if (isBold) {
+          node = <strong>{node}</strong>;
         }
 
         nodes.push(node);
         lastStr = '';
-        isQuota = !isQuota;
+        if (char === '`') {
+          isQuota = !isQuota;
+        } else if (char === '*' && changelog[i + 1] === '*') {
+          isBold = !isBold;
+          i += 1; // Skip the next '*'
+        }
       }
     }
 
@@ -120,11 +156,13 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any
     return nodes;
   }, [changelog]);
 
+  return <span>{parsedChangelog}</span>;
+};
+
+const RefLinks: React.FC<{ refs: string[] }> = ({ refs }) => {
+  const { styles } = useStyle();
   return (
     <>
-      {/* Changelog */}
-      <span>{parsedChangelog}</span>
-      {/* Refs */}
       {refs?.map((ref) => (
         <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
           #{ref.match(/^.*\/(\d+)$/)?.[1]}
@@ -134,11 +172,39 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any
   );
 };
 
-interface ChangelogInfo {
-  version: string;
-  changelog: string;
-  refs: string[];
-}
+const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ changelogList }) => {
+  const elements: React.ReactNode[] = [];
+  const { styles } = useStyle();
+  for (let i = 0; i < changelogList.length; i += 1) {
+    const { refs, changelog } = changelogList[i];
+    // Check if the next line is an image link and append it to the current line
+    if (i + 1 < changelogList.length && changelogList[i + 1].changelog.trim().startsWith('<img')) {
+      const imgDom = new DOMParser().parseFromString(changelogList[i + 1].changelog, 'text/html');
+      const imgElement = imgDom.querySelector('img');
+      elements.push(
+        <li key={i}>
+          <ParseChangelog changelog={changelog} />
+          <RefLinks refs={refs} />
+          <br />
+          <img
+            src={imgElement?.getAttribute('src') || ''}
+            alt={imgElement?.getAttribute('alt') || ''}
+            width={imgElement?.getAttribute('width') || ''}
+          />
+        </li>,
+      );
+      i += 1; // Skip the next line
+    } else {
+      elements.push(
+        <li key={i}>
+          <ParseChangelog changelog={changelog} />
+          <RefLinks refs={refs} />
+        </li>,
+      );
+    }
+  }
+  return <ul className={styles.listWrap}>{elements}</ul>;
+};
 
 const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
   const logFileName = `components-changelog-${lang}.json`;
@@ -156,10 +222,11 @@ const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[]
   }, [data, componentPath]);
 };
 
-const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
-  const { pathname = '' } = props;
+const ComponentChangelog: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
+  const { children } = props;
   const [locale, lang] = useLocale(locales);
   const [show, setShow] = React.useState(false);
+  const { pathname } = useLocation();
 
   const { styles } = useStyle();
 
@@ -181,42 +248,46 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
       return {
         children: (
           <Typography>
-            <Typography.Title level={4}>
-              {version}
-              {bugVersionInfo.match && (
-                <Popover
-                  destroyTooltipOnHide
-                  placement="right"
-                  title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
-                  content={
-                    <ul className={styles.bugReasonList}>
-                      {bugVersionInfo.reason.map<React.ReactNode>((reason, index) => (
-                        <li key={`reason-${index}`}>
-                          <a type="link" target="_blank" rel="noreferrer" href={reason}>
-                            <BugOutlined />
-                            {reason
-                              ?.replace(/#.*$/, '')
-                              ?.replace(
-                                /^https:\/\/github\.com\/ant-design\/ant-design\/(issues|pull)\//,
-                                '#',
-                              )}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  }
-                >
-                  <BugOutlined className={styles.bug} />
-                </Popover>
-              )}
-            </Typography.Title>
-            <ul>
-              {changelogList.map<React.ReactNode>((info, index) => (
-                <li key={index}>
-                  <ParseChangelog {...info} styles={styles} />
-                </li>
-              ))}
-            </ul>
+            <Flex className={styles.versionWrap} justify="flex-start" align="center" gap="middle">
+              <Button
+                color="default"
+                className={styles.versionTitle}
+                variant="link"
+                href={`/changelog${lang === 'cn' ? '-cn' : ''}/#${version.replace(/\./g, '').replace(/\s.*/g, '-')}`}
+              >
+                {version}
+                {bugVersionInfo.match && (
+                  <Popover
+                    destroyTooltipOnHide
+                    placement="right"
+                    title={<span className={styles.bugReasonTitle}>{locale.bugList}</span>}
+                    content={
+                      <ul className={styles.bugReasonList}>
+                        {bugVersionInfo.reason.map<React.ReactNode>((reason, index) => (
+                          <li key={`reason-${index}`}>
+                            <a type="link" target="_blank" rel="noreferrer" href={reason}>
+                              <BugOutlined />
+                              {reason
+                                ?.replace(/#.*$/, '')
+                                ?.replace(
+                                  /^https:\/\/github\.com\/ant-design\/ant-design\/(issues|pull)\//,
+                                  '#',
+                                )}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    }
+                  >
+                    <BugOutlined className={styles.bug} />
+                  </Popover>
+                )}
+              </Button>
+              <Tag className={styles.versionTag} bordered={false} color="blue">
+                {changelogList[0]?.releaseDate}
+              </Tag>
+            </Flex>
+            <RenderChangelogList changelogList={changelogList} />
           </Typography>
         ),
       };
@@ -226,15 +297,16 @@ const ComponentChangelog: React.FC<ComponentChangelogProps> = (props) => {
   const screens = Grid.useBreakpoint();
   const width = screens.md ? '48vw' : '90vw';
 
-  if (!list || !list.length) {
+  if (!pathname.startsWith('/components/') || !list || !list.length) {
     return null;
   }
 
   return (
     <>
-      <Button icon={<HistoryOutlined />} onClick={() => setShow(true)}>
-        {locale.changelog}
-      </Button>
+      {isValidElement(children) &&
+        cloneElement(children as React.ReactElement, {
+          onClick: () => setShow(true),
+        })}
       <Drawer
         destroyOnClose
         className={styles.drawerContent}

.dumi/theme/common/ComponentChangelog/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import type { ComponentChangelogProps } from './ComponentChangelog';
 import ComponentChangelog from './ComponentChangelog';
 
-export default (props: ComponentChangelogProps) => (
+const ChangeLog: React.FC<Readonly<React.PropsWithChildren>> = ({ children }) => (
   <React.Suspense fallback={null}>
-    <ComponentChangelog {...props} />
+    <ComponentChangelog>{children}</ComponentChangelog>
   </React.Suspense>
 );
+
+export default ChangeLog;

.dumi/theme/common/styles/Demo.tsx

@@ -71,18 +71,6 @@ const GlobalDemoStyles: React.FC = () => {
             border: 1px solid ${token.colorPrimary};
           }
 
-          &-expand-trigger {
-            position: relative;
-            color: #3b4357;
-            font-size: ${token.fontSizeXL}px;
-            cursor: pointer;
-            opacity: 0.75;
-            transition: all ${token.motionDurationSlow};
-            &:hover {
-              opacity: 1;
-            }
-          }
-
           &-title {
             position: absolute;
             top: -14px;
@@ -336,6 +324,7 @@ const GlobalDemoStyles: React.FC = () => {
 
           &-debug {
             border-color: ${token.purple3};
+            display: none;
           }
 
           &-debug &-title a {
@@ -345,6 +334,10 @@ const GlobalDemoStyles: React.FC = () => {
 
         .demo-wrapper {
           position: relative;
+
+          &-show-debug .code-box-debug {
+            display: block;
+          }
         }
 
         .all-code-box-controls {
@@ -353,7 +346,18 @@ const GlobalDemoStyles: React.FC = () => {
           inset-inline-end: 0;
           display: flex;
           align-items: center;
-          column-gap: ${token.marginSM}px;
+          column-gap: ${token.marginXS}px;
+
+          ${antCls}-btn {
+            opacity: 0.6;
+            &.icon-enabled {
+             background: ${token.colorFillSecondary};
+             opacity: 1;
+            ${iconCls} {
+              color: ${token.colorTextBase};
+              font-weight: bold;
+            }
+          }
         }
 
         ${antCls}-row-rtl {

.dumi/theme/slots/Content/index.tsx

@@ -18,7 +18,6 @@ const DocAnchor = React.lazy(() => import('./DocAnchor'));
 const DocMeta = React.lazy(() => import('./DocMeta'));
 const Footer = React.lazy(() => import('../Footer'));
 const PrevAndNext = React.lazy(() => import('../../common/PrevAndNext'));
-const ComponentChangelog = React.lazy(() => import('../../common/ComponentChangelog'));
 const EditButton = React.lazy(() => import('../../common/EditButton'));
 
 const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
@@ -70,11 +69,6 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
                   )}
                 </Space>
               </Typography.Title>
-              {pathname.startsWith('/components/') && (
-                <InViewSuspense fallback={null}>
-                  <ComponentChangelog pathname={pathname} />
-                </InViewSuspense>
-              )}
             </Flex>
           ) : null}
           <InViewSuspense fallback={null}>

.github/workflows/issue-labeled.yml

@@ -38,9 +38,9 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ github.event.issue.number }}
           body: |
-            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking [this one](https://u.ant.design/repro) or provide a minimal GitHub repository like [create-react-app-antd](https://github.com/ant-design/create-react-app-antd). Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
+            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking [this one](https://u.ant.design/reproduce) or provide a minimal GitHub repository like [create-react-app-antd](https://github.com/ant-design/create-react-app-antd). Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
 
-            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个[在线重现案例](https://u.ant.design/repro) ，或者提供一个最小化的 GitHub 仓库（类似 [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)）。3 天内未跟进此 issue 将会被自动关闭。
+            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过 fork 这个[在线重现案例](https://u.ant.design/reproduce) ，或者提供一个最小化的 GitHub 仓库（类似 [create-react-app-antd](https://github.com/ant-design/create-react-app-antd)）。3 天内未跟进此 issue 将会被自动关闭。
 
             > [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)
 

.github/workflows/pr-check-ci.yml

@@ -1,5 +1,5 @@
 # Used to merge master/feature branches with each other
-name: PR Check CI
+name: PR Auto Merge Bot
 
 on:
   schedule:

.github/workflows/pr-open-notify.yml

@@ -1,4 +1,4 @@
-name: PR Open Check
+name: PR Open Notify
 
 on:
   pull_request_target:

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
-  "*.{ts,tsx,js,jsx,css,mjs,json}": ["biome check --write --no-errors-on-unmatched"],
+  "*.{ts,tsx,js,jsx,css,mjs,json}": ["biome check --write --no-errors-on-unmatched", "eslint"],
   "*.{md,yml}": ["prettier --ignore-unknown --write"]
 }

BUG_VERSIONS.json

@@ -57,5 +57,9 @@
   "5.16.3": ["https://github.com/ant-design/ant-design/issues/48568"],
   "5.17.1": ["https://github.com/ant-design/ant-design/issues/48913"],
   "5.18.2": ["https://github.com/ant-design/ant-design/pull/49487"],
-  "5.20.4": ["https://github.com/ant-design/ant-design/issues/50687"]
+  "5.20.4": ["https://github.com/ant-design/ant-design/issues/50687"],
+  "5.21.0": [
+    "https://github.com/ant-design/ant-design/issues/50960",
+    "https://github.com/ant-design/ant-design/issues/50969"
+  ]
 }

CHANGELOG.en-US.md

@@ -1,7 +1,6 @@
 ---
 order: 6
 title: Changelog
-toc: false
 timeline: true
 tag: vVERSION
 ---
@@ -16,6 +15,46 @@ tag: vVERSION
 
 ---
 
+## 5.21.3
+
+`2024-10-09`
+
+- 💄 Added a scroll bar to Dropdown when having many items. [#51112](https://github.com/ant-design/ant-design/pull/51112) [@Cameron-Asdf](https://github.com/Cameron-Asdf)
+- Slider [#51150](https://github.com/ant-design/ant-design/pull/51150) [@yoyo837](https://github.com/yoyo837)
+  - 🐞 Fix Slider issue where the `id` prop is not supported.
+  - 🐞 Fix Slider to address the issue causing `useLayoutEffect does nothing on the server` warning when `extractStyle` is invoked.
+- 🐞 Fix ColorPicker with gradient mode, sometimes handle color will be force sync back to first handle color issue. [#51161](https://github.com/ant-design/ant-design/pull/51161) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Table `onChange` function receiving incorrect sorter value. [#51114](https://github.com/ant-design/ant-design/pull/51114) [@nathanlao](https://github.com/nathanlao)
+- Splitter
+  - 🐞 Fix the issue about throw a warning when Splitter nested in a hidden tab panel. [#51109](https://github.com/ant-design/ant-design/pull/51109) [@kiner-tang](https://github.com/kiner-tang)
+  - 🐞 Fix the issue about Splitter had unexpected gaps in Flex. [#51096](https://github.com/ant-design/ant-design/pull/51096) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 MISC: Restore `react` and `react-dom` peerDependencies. [#51079](https://github.com/ant-design/ant-design/pull/51079) [@chentsulin](https://github.com/chentsulin)
+- TypeScript
+  - 🤖 Improve type of Slider `eventName`. [#51156](https://github.com/ant-design/ant-design/pull/51156) [@thinkasany](https://github.com/thinkasany)
+
+## 5.21.2
+
+`2024-10-01`
+
+- 🐞 Revert [#49221](https://github.com/ant-design/ant-design/pull/49221) to fix Typography `copyable` icon align issue. [#51066](https://github.com/ant-design/ant-design/pull/51066) [@afc163](https://github.com/afc163)
+- 🐞 Fix Tabs flicker when browser zoom is enabled. [#51072](https://github.com/ant-design/ant-design/pull/51072) [@afc163](https://github.com/afc163)
+- 🐞 Fix Select incorrect `activeBorderColor` token when variant is filled. [#51054](https://github.com/ant-design/ant-design/pull/51054) [@coding-ice](https://github.com/coding-ice)
+- 🐞 Fixed Input.Search alignment issue between the input field and search button at different zoom levels. [#50926](https://github.com/ant-design/ant-design/pull/50926) [@nathanlao](https://github.com/nathanlao)
+- 💄 MISC: Tweak outline width of focus style from `4px` to `3px`. [#51069](https://github.com/ant-design/ant-design/pull/51069) [@afc163](https://github.com/afc163)
+- Splitter
+  - 🐞 Fixed the issue with Splitter dragging abnormally on touch screen devices. [#51060](https://github.com/ant-design/ant-design/pull/51060) [@sakuraee](https://github.com/sakuraee)
+  - 💄 Fixed Splitter.Panel style is invalid error. [#51032](https://github.com/ant-design/ant-design/pull/51032) [@wanpan11](https://github.com/wanpan11)
+- ⚡️ Remove TransButton in Table/Transfer/Typography. [#51068](https://github.com/ant-design/ant-design/pull/51068) [@afc163](https://github.com/afc163)
+
+## 5.21.1
+
+`2024-09-25`
+
+- 🐞 Fix Button issue where `type="link"` incorrectly used `colorPrimary`. [#50962](https://github.com/ant-design/ant-design/pull/50962) [@coding-ice](https://github.com/coding-ice)
+- 🐞 Fix Button style class name weight issue that caused custom gradient styles to be overridden. [#50962](https://github.com/ant-design/ant-design/pull/50962) [@coding-ice](https://github.com/coding-ice)
+- 🐞 Fix Transfer width issue when customized as TableTransfer. [#50974](https://github.com/ant-design/ant-design/pull/50974) [@zombieJ](https://github.com/zombieJ)
+- 🇹🇷 Add Turkish text for `filterCheckall` in Table component. [#51000](https://github.com/ant-design/ant-design/pull/51000) [@ytahirkose](https://github.com/ytahirkose)
+
 ## 5.21.0 🔥
 
 `2024-09-22`

CHANGELOG.zh-CN.md

@@ -15,6 +15,46 @@ tag: vVERSION
 
 ---
 
+## 5.21.3
+
+`2024-10-09`
+
+- 💄 优化 Dropdown 列表较长时的滚动条样式。[#51112](https://github.com/ant-design/ant-design/pull/51112) [@Cameron-Asdf](https://github.com/Cameron-Asdf)
+- Slider [#51150](https://github.com/ant-design/ant-design/pull/51150) [@yoyo837](https://github.com/yoyo837)
+  - 🐞 修复 Slider 不支持 `id` 属性的问题。
+  - 🐞 修复 Slider 导致 `extractStyle` 时抛出 `useLayoutEffect does nothing on the server` 警告信息的问题。
+- 🐞 修复 ColorPicker 渐变色时，部分节点颜色拖拽会被强制重置为第一个节点颜色的问题。[#51161](https://github.com/ant-design/ant-design/pull/51161) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Table 组件在切换页面时 `onChange` 函数接收到错误的 sorter 值的问题。[#51114](https://github.com/ant-design/ant-design/pull/51114) [@nathanlao](https://github.com/nathanlao)
+- Splitter
+  - 🐞 修复 Splitter 嵌套在一个隐藏的 Tabs 面板中时抛出警告的问题。[#51109](https://github.com/ant-design/ant-design/pull/51109) [@kiner-tang](https://github.com/kiner-tang)
+  - 🐞 修复 Splitter 组件在 Flex 组件下时出现异常间距的问题。[#51096](https://github.com/ant-design/ant-design/pull/51096) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 杂项：重新将 `react` 和 `react-dom` 添加进 peerDependencies。[#51079](https://github.com/ant-design/ant-design/pull/51079) [@chentsulin](https://github.com/chentsulin)
+- TypeScript
+  - 🤖 优化 Slider `eventName` 类型。[#51156](https://github.com/ant-design/ant-design/pull/51156) [@thinkasany](https://github.com/thinkasany)
+
+## 5.21.2
+
+`2024-10-01`
+
+- 🐞 回滚 [#49221](https://github.com/ant-design/ant-design/pull/49221) 以修复 Typography `copyable` 图标位置偏上的问题。[#51066](https://github.com/ant-design/ant-design/pull/51066) [@afc163](https://github.com/afc163)
+- 🐞 修复 Tabs 在浏览器缩放时无限闪烁的问题。[#51072](https://github.com/ant-design/ant-design/pull/51072) [@afc163](https://github.com/afc163)
+- 🐞 修复了 Input.Search 组件中在不同缩放级别下输入框和按钮的对齐问题。[#50926](https://github.com/ant-design/ant-design/pull/50926) [@nathanlao](https://github.com/nathanlao)
+- 🐞 修复 Select `variant="filled"` 时 `activeBorderColor` token 失效的问题。[#51054](https://github.com/ant-design/ant-design/pull/51054) [@coding-ice](https://github.com/coding-ice)
+- 💄 MISC: 调整 focus 时的 outline 边框宽度，从 `4px` 调整到 `3px`。[#51069](https://github.com/ant-design/ant-design/pull/51069) [@afc163](https://github.com/afc163)
+- Splitter
+  - 🐞 修复 Splitter 在触屏设备上拖拽异常的问题。[#51060](https://github.com/ant-design/ant-design/pull/51060) [@sakuraee](https://github.com/sakuraee)
+  - 💄 修复 Splitter.Panel 无法隐藏的问题。[#51032](https://github.com/ant-design/ant-design/pull/51032) [@wanpan11](https://github.com/wanpan11)
+- 📦 移除 Table/Transfer/Typography 内的 TransButton 实现以降低打包体积。[#51068](https://github.com/ant-design/ant-design/pull/51068) [@afc163](https://github.com/afc163)
+
+## 5.21.1
+
+`2024-09-25`
+
+- 🐞 修复 Button `type="link"` 错误使用 `colorPrimary` 的问题。[#50962](https://github.com/ant-design/ant-design/pull/50962) [@coding-ice](https://github.com/coding-ice)
+- 🐞 修复 Button 样式类名权重问题导致的自定义渐变样式覆盖失效的问题。[#50962](https://github.com/ant-design/ant-design/pull/50962) [@coding-ice](https://github.com/coding-ice)
+- 💄 修复 Transfer 在自定义为 TableTransfer 时，宽度不正确的问题。[#50974](https://github.com/ant-design/ant-design/pull/50974) [@zombieJ](https://github.com/zombieJ)
+- 🇹🇷 补充 Table 组件 `filterCheckall` 的土耳其语文案。[#51000](https://github.com/ant-design/ant-design/pull/51000) [@ytahirkose](https://github.com/ytahirkose)
+
 ## 5.21.0 🔥
 
 `2024-09-22`

README-zh_CN.md

@@ -131,7 +131,7 @@ export default App;
 - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
 - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [常见问题](https://ant.design/docs/react/faq-cn)
-- [Stackblitz 在线演示](https://u.ant.design/reproduce)，用于报告 bug
+- [在线演示](https://u.ant.design/reproduce)，用于报告 bug
 - [定制主题](https://ant.design/docs/react/customize-theme-cn)
 - [国际化](https://ant.design/docs/react/i18n-cn)
 - [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)

README.md

@@ -113,7 +113,7 @@ export default () => (
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [FAQ](https://ant.design/docs/react/faq)
-- [Stackblitz Demo](https://u.ant.design/reproduce) for bug reports
+- [Online Playground](https://u.ant.design/reproduce) for bug reports
 - [Customize Theme](https://ant.design/docs/react/customize-theme)
 - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 

components/_util/__tests__/transButton.test.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { render } from '../../../tests/utils';
-import TransButton from '../transButton';
-
-describe('transButton component', () => {
-  it('disabled should update style', () => {
-    const { container } = render(<TransButton disabled />);
-    expect(container.querySelector('div')?.style.pointerEvents).toBe('none');
-  });
-});

components/_util/__tests__/util.test.tsx

@@ -1,10 +1,6 @@
-import React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { waitFakeTimer } from '../../../tests/utils';
 import { isStyleSupport } from '../styleChecker';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';
-import TransButton from '../transButton';
 
 describe('Test utils function', () => {
   describe('throttle', () => {
@@ -45,29 +41,6 @@ describe('Test utils function', () => {
     });
   });
 
-  describe('TransButton', () => {
-    it('can be focus/blur', () => {
-      const ref = React.createRef<HTMLDivElement>();
-      render(<TransButton ref={ref}>TransButton</TransButton>);
-      expect(typeof ref.current?.focus).toBe('function');
-      expect(typeof ref.current?.blur).toBe('function');
-    });
-
-    it('should trigger onClick when press enter', () => {
-      const onClick = jest.fn();
-
-      const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
-
-      // callback should trigger
-      fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalledTimes(1);
-
-      // callback should not trigger
-      fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
   describe('style', () => {
     it('isStyleSupport', () => {
       expect(isStyleSupport('color')).toBe(true);

components/_util/transButton.tsx

@@ -1,73 +0,0 @@
-/**
- * Wrap of sub component which need use as Button capacity (like Icon component).
- *
- * This helps accessibility reader to tread as a interactive button to operation.
- */
-import * as React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-
-interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  noStyle?: boolean;
-  autoFocus?: boolean;
-  disabled?: boolean;
-  tabIndex?: number;
-}
-
-const inlineStyle: React.CSSProperties = {
-  border: 0,
-  background: 'transparent',
-  padding: 0,
-  lineHeight: 'inherit',
-  display: 'inline-flex',
-};
-
-const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, ref) => {
-  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
-    const { keyCode } = event;
-    if (keyCode === KeyCode.ENTER) {
-      event.preventDefault();
-    }
-  };
-
-  const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
-    const { keyCode } = event;
-    const { onClick } = props;
-    if (keyCode === KeyCode.ENTER && onClick) {
-      onClick();
-    }
-  };
-
-  const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;
-
-  let mergedStyle: React.CSSProperties = {};
-
-  if (!noStyle) {
-    mergedStyle = {
-      ...inlineStyle,
-    };
-  }
-
-  if (disabled) {
-    mergedStyle.pointerEvents = 'none';
-  }
-
-  mergedStyle = {
-    ...mergedStyle,
-    ...style,
-  };
-
-  return (
-    <div
-      role="button"
-      tabIndex={tabIndex}
-      ref={ref}
-      {...restProps}
-      onKeyDown={onKeyDown}
-      onKeyUp={onKeyUp}
-      style={mergedStyle}
-    />
-  );
-});
-
-export default TransButton;

components/_util/wave/useWave.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import raf from 'rc-util/lib/raf';
 
 import { ConfigContext } from '../../config-provider';

components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -7,7 +7,7 @@ Array [
       class=""
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -22,7 +22,7 @@ Array [
       class=""
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -51,7 +51,7 @@ exports[`renders components/affix/demo/debug.tsx extend context correctly 1`] =
         style="background: red;"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>
@@ -75,7 +75,7 @@ exports[`renders components/affix/demo/on-change.tsx extend context correctly 1`
     class=""
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -100,7 +100,7 @@ exports[`renders components/affix/demo/target.tsx extend context correctly 1`] =
         class=""
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>

components/affix/__tests__/__snapshots__/demo.test.tsx.snap

@@ -7,7 +7,7 @@ Array [
       class=""
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -22,7 +22,7 @@ Array [
       class=""
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -49,7 +49,7 @@ exports[`renders components/affix/demo/debug.tsx correctly 1`] = `
         style="background:red"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>
@@ -71,7 +71,7 @@ exports[`renders components/affix/demo/on-change.tsx correctly 1`] = `
     class=""
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -94,7 +94,7 @@ exports[`renders components/affix/demo/target.tsx correctly 1`] = `
         class=""
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>

components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -39,7 +39,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
+        class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
         type="button"
       >
         <span>
@@ -118,7 +118,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm"
+        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-sm"
         type="button"
       >
         <span>
@@ -152,7 +152,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
+            class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
             type="button"
           >
             <span>
@@ -219,7 +219,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
             type="button"
           >
             <span>
@@ -231,7 +231,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm ant-btn-background-ghost"
+            class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-sm ant-btn-background-ghost"
             type="button"
           >
             <span>
@@ -1004,7 +1004,7 @@ exports[`renders components/alert/demo/description.tsx extend context correctly
 
 exports[`renders components/alert/demo/error-boundary.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-dangerous ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined"
   type="button"
 >
   <span>

components/alert/__tests__/__snapshots__/demo.test.ts.snap

@@ -39,7 +39,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
+        class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
         type="button"
       >
         <span>
@@ -118,7 +118,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm"
+        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-sm"
         type="button"
       >
         <span>
@@ -152,7 +152,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
+            class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
             type="button"
           >
             <span>
@@ -219,7 +219,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
             type="button"
           >
             <span>
@@ -231,7 +231,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-sm ant-btn-background-ghost"
+            class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-sm ant-btn-background-ghost"
             type="button"
           >
             <span>
@@ -992,7 +992,7 @@ Array [
 
 exports[`renders components/alert/demo/error-boundary.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-dangerous ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined"
   type="button"
 >
   <span>

components/alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`Alert custom action 1`] = `
     class="ant-alert-action"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-text ant-btn-sm"
+      class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm"
       type="button"
     >
       <span>

components/anchor/Anchor.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
 import getScroll from '../_util/getScroll';

components/app/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -12,7 +12,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -24,7 +24,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -36,7 +36,7 @@ exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -62,7 +62,7 @@ exports[`renders components/app/demo/config.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -74,7 +74,7 @@ exports[`renders components/app/demo/config.tsx extend context correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>

components/app/__tests__/__snapshots__/demo.test.ts.snap

@@ -12,7 +12,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -24,7 +24,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -36,7 +36,7 @@ exports[`renders components/app/demo/basic.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -60,7 +60,7 @@ exports[`renders components/app/demo/config.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -72,7 +72,7 @@ exports[`renders components/app/demo/config.tsx correctly 1`] = `
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>

components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -225,7 +225,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
               type="button"
             >
               <span
@@ -1517,7 +1517,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
                           class="ant-input-group-addon"
                         >
                           <button
-                            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+                            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
                             type="button"
                           >
                             <span
@@ -1749,7 +1749,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
                           class="ant-input-group-addon"
                         >
                           <button
-                            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+                            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
                             type="button"
                           >
                             <span
@@ -1798,7 +1798,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
                 </div>
               </div>
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="button"
               >
                 <span
@@ -2332,7 +2332,7 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx extend con
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-input-search-button"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-input-search-button"
               type="button"
             >
               <span

components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap

@@ -168,7 +168,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-icon-only ant-input-search-button"
               type="button"
             >
               <span
@@ -849,7 +849,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
                           class="ant-input-group-addon"
                         >
                           <button
-                            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+                            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
                             type="button"
                           >
                             <span
@@ -1007,7 +1007,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
                           class="ant-input-group-addon"
                         >
                           <button
-                            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+                            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
                             type="button"
                           >
                             <span
@@ -1044,7 +1044,7 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
                 </div>
               </div>
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="button"
               >
                 <span
@@ -1320,7 +1320,7 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-input-search-button"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-input-search-button"
               type="button"
             >
               <span

components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -650,7 +650,7 @@ Array [
     </span>
   </span>,
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm"
     style="margin: 0px 16px; vertical-align: middle;"
     type="button"
   >
@@ -659,7 +659,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm"
     style="vertical-align: middle;"
     type="button"
   >
@@ -1298,7 +1298,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
         type="button"
       >
         <span>
@@ -1310,7 +1310,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
         type="button"
       >
         <span>
@@ -1322,7 +1322,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
         type="button"
       >
         <span>

components/avatar/__tests__/__snapshots__/demo.test.tsx.snap

@@ -555,7 +555,7 @@ Array [
     </span>
   </span>,
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm"
     style="margin:0 16px;vertical-align:middle"
     type="button"
   >
@@ -564,7 +564,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm"
     style="vertical-align:middle"
     type="button"
   >
@@ -908,7 +908,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
         type="button"
       >
         <span>
@@ -920,7 +920,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
         type="button"
       >
         <span>
@@ -932,7 +932,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
         type="button"
       >
         <span>

components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -156,7 +156,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
           class="ant-btn-group"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
             type="button"
           >
             <span
@@ -184,7 +184,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
             </span>
           </button>
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
             type="button"
           >
             <span
@@ -215,7 +215,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
             </span>
           </button>
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
             type="button"
           >
             <span

components/badge/__tests__/__snapshots__/demo.test.tsx.snap

@@ -154,7 +154,7 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
           class="ant-btn-group"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
             type="button"
           >
             <span
@@ -182,7 +182,7 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
             </span>
           </button>
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
             type="button"
           >
             <span
@@ -213,7 +213,7 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = `
             </span>
           </button>
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
             type="button"
           >
             <span

components/button/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   0
@@ -11,7 +11,7 @@ exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
 
 exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -22,14 +22,14 @@ exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
 
 exports[`Button fixbug renders {0} , 0 and {false} 3`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 />
 `;
 
 exports[`Button renders Chinese characters correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -40,7 +40,7 @@ exports[`Button renders Chinese characters correctly 1`] = `
 
 exports[`Button renders Chinese characters correctly 2`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span
@@ -74,7 +74,7 @@ exports[`Button renders Chinese characters correctly 2`] = `
 
 exports[`Button renders Chinese characters correctly 3`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span
@@ -104,7 +104,7 @@ exports[`Button renders Chinese characters correctly 3`] = `
 
 exports[`Button renders Chinese characters correctly 4`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span
@@ -138,7 +138,7 @@ exports[`Button renders Chinese characters correctly 4`] = `
 
 exports[`Button renders Chinese characters correctly 5`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined ant-btn-loading"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-loading"
   type="button"
 >
   <span
@@ -172,7 +172,7 @@ exports[`Button renders Chinese characters correctly 5`] = `
 
 exports[`Button renders Chinese characters correctly 6`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined ant-btn-loading"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-loading"
   type="button"
 >
   <span
@@ -207,7 +207,7 @@ exports[`Button renders Chinese characters correctly 6`] = `
 
 exports[`Button renders Chinese characters correctly 7`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -218,7 +218,7 @@ exports[`Button renders Chinese characters correctly 7`] = `
 
 exports[`Button renders correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -229,21 +229,21 @@ exports[`Button renders correctly 1`] = `
 
 exports[`Button rtl render component should be rendered correctly in RTL direction 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined ant-btn-rtl"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-rtl"
   type="button"
 />
 `;
 
 exports[`Button rtl render component should be rendered correctly in RTL direction 2`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined ant-btn-lg ant-btn-rtl"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg ant-btn-rtl"
   type="button"
 />
 `;
 
 exports[`Button rtl render component should be rendered correctly in RTL direction 3`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm ant-btn-rtl"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm ant-btn-rtl"
   type="button"
 />
 `;
@@ -274,7 +274,7 @@ exports[`Button rtl render component should be rendered correctly in RTL directi
 
 exports[`Button should handle fragment as children 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -285,7 +285,7 @@ exports[`Button should handle fragment as children 1`] = `
 
 exports[`Button should merge text if children using variable 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -296,7 +296,7 @@ exports[`Button should merge text if children using variable 1`] = `
 
 exports[`Button should not render as link button when href is undefined 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span>
@@ -307,7 +307,7 @@ exports[`Button should not render as link button when href is undefined 1`] = `
 
 exports[`Button should render empty button without errors 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 />
 `;
@@ -315,7 +315,7 @@ exports[`Button should render empty button without errors 1`] = `
 exports[`Button should support custom icon className 1`] = `
 <div>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only"
     type="button"
   >
     <span
@@ -348,7 +348,7 @@ exports[`Button should support custom icon className 1`] = `
 exports[`Button should support custom icon styles 1`] = `
 <div>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only"
     type="button"
   >
     <span
@@ -381,7 +381,7 @@ exports[`Button should support custom icon styles 1`] = `
 
 exports[`Button should support link button 1`] = `
 <a
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   href="https://ant.design"
   tabindex="0"
   target="_blank"

components/button/__tests__/index.test.tsx

@@ -451,7 +451,7 @@ describe('Button', () => {
 
   it('should support solidTextColor when theme changes', () => {
     const { container: defaultContainer } = render(
-      <ConfigProvider theme={{ algorithm: [theme.defaultAlgorithm] }}>
+      <ConfigProvider theme={{ algorithm: [theme.defaultAlgorithm], cssVar: true }}>
         <Button color="default" variant="solid">
           btn1
         </Button>
@@ -459,11 +459,11 @@ describe('Button', () => {
     );
 
     expect(defaultContainer.firstChild).toHaveStyle({
-      color: 'rgb(255, 255, 255)',
+      '--ant-button-solid-text-color': '#fff',
     });
 
     const { container: darkContainer } = render(
-      <ConfigProvider theme={{ algorithm: [theme.darkAlgorithm] }}>
+      <ConfigProvider theme={{ algorithm: [theme.darkAlgorithm], cssVar: true }}>
         <Button color="default" variant="solid">
           btn2
         </Button>
@@ -471,7 +471,7 @@ describe('Button', () => {
     );
 
     expect(darkContainer.firstChild).toHaveStyle({
-      color: 'rgb(0, 0, 0)',
+      '--ant-button-solid-text-color': '#000',
     });
   });
 });

components/button/button.tsx

@@ -249,8 +249,11 @@ const InternalCompoundedButton = React.forwardRef<
     cssVarCls,
     {
       [`${prefixCls}-${shape}`]: shape !== 'default' && shape,
-      [`${prefixCls}-${mergedColorText}`]: mergedColorText,
-      [`${prefixCls}-${mergedVariant}`]: mergedVariant,
+      // line(253 - 254): Compatible with versions earlier than 5.21.0
+      [`${prefixCls}-${mergedType}`]: mergedType,
+      [`${prefixCls}-dangerous`]: danger,
+      [`${prefixCls}-color-${mergedColorText}`]: mergedColorText,
+      [`${prefixCls}-variant-${mergedVariant}`]: mergedVariant,
       [`${prefixCls}-${sizeCls}`]: sizeCls,
       [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
       [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonVariant(mergedVariant),

components/button/demo/debug-color-variant.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+调试使用
+
+## en-US
+
+Debug usage

components/button/demo/debug-color-variant.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Button, ConfigProvider, Flex } from 'antd';
+import { createStyles } from 'antd-style';
+
+const useSpecStyle = createStyles(({ css }) => ({
+  primary: css`
+    background: #5794f7;
+    border-color: blue;
+    color: wheat;
+  `,
+  default: css`
+    border-color: gray;
+    background: #f5f5f5;
+    color: #313030;
+  `,
+  dashed: css`
+    border-color: gray;
+    background: #f5f5f5;
+    color: #313030;
+  `,
+  text: css`
+    color: gray;
+  `,
+  link: css`
+    color: blue;
+  `,
+}));
+
+const useOriginalClsStyle = createStyles(({ css }) => ({
+  wrapper: css`
+    .ant-btn-primary {
+      color: #ec5b56;
+    }
+    .ant-btn-default {
+      color: orange;
+    }
+    .ant-btn-dashed {
+      color: #3976f6;
+    }
+    .ant-btn-text {
+      color: green;
+    }
+    .ant-btn-link {
+      color: #0e98aa;
+    }
+  `,
+}));
+
+const App: React.FC = () => {
+  const { styles: specStyle } = useSpecStyle();
+  const { styles: originalClsStyle } = useOriginalClsStyle();
+
+  return (
+    <Flex vertical gap="middle">
+      {/* link color */}
+      <Flex gap="small">
+        <ConfigProvider theme={{ token: { colorPrimary: 'red' } }}>
+          <Button type="link">Link Button</Button>
+        </ConfigProvider>
+        <Button type="link">Link Button</Button>
+      </Flex>
+
+      {/* css specificity  */}
+      <Flex gap="small" wrap>
+        <Button type="primary" className={specStyle.primary}>
+          Primary Button
+        </Button>
+        <Button type="default" className={specStyle.default}>
+          Default Button
+        </Button>
+        <Button type="dashed" className={specStyle.dashed}>
+          Dashed Button
+        </Button>
+        <Button type="text" className={specStyle.text}>
+          Text Button
+        </Button>
+        <Button type="link" className={specStyle.link}>
+          Link Button
+        </Button>
+      </Flex>
+
+      {/* Compatibility: v < 5.20.1  */}
+      <Flex gap="small" wrap className={originalClsStyle.wrapper}>
+        <Button type="primary">Primary Button</Button>
+        <Button type="default">Default Button</Button>
+        <Button type="dashed">Dashed Button</Button>
+        <Button type="text">Text Button</Button>
+        <Button type="link">Link Button</Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default App;

components/button/index.en-US.md

@@ -35,6 +35,7 @@ And 4 other properties additionally.
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Syntactic sugar</code>
 <code src="./demo/color-variant.tsx" version="5.21.0">Color & Variant</code>
+<code src="./demo/debug-color-variant" debug>Debug Color & Variant</code>
 <code src="./demo/icon.tsx">Icon</code>
 <code src="./demo/icon-position.tsx" version="5.17.0">Icon Position</code>
 <code src="./demo/debug-icon.tsx" debug>Debug Icon</code>

components/button/index.zh-CN.md

@@ -38,6 +38,7 @@ group:
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">语法糖</code>
 <code src="./demo/color-variant.tsx" version="5.21.0">颜色与变体</code>
+<code src="./demo/debug-color-variant" debug>调试颜色与变体</code>
 <code src="./demo/icon.tsx">按钮图标</code>
 <code src="./demo/icon-position.tsx" version="5.17.0">按钮图标位置</code>
 <code src="./demo/debug-icon.tsx" debug>调试图标按钮</code>

components/button/style/index.ts

@@ -179,7 +179,7 @@ const genSolidButtonStyle = (
   hoverStyle: CSSObject,
   activeStyle: CSSObject,
 ): CSSObject => ({
-  [`&${token.componentCls}-solid`]: {
+  [`&${token.componentCls}-variant-solid`]: {
     color: textColor,
     background,
 
@@ -194,7 +194,7 @@ const genOutlinedDashedButtonStyle = (
   hoverStyle: CSSObject,
   activeStyle: CSSObject,
 ) => ({
-  [`&${token.componentCls}-outlined, &${token.componentCls}-dashed`]: {
+  [`&${token.componentCls}-variant-outlined, &${token.componentCls}-variant-dashed`]: {
     borderColor,
     background,
 
@@ -203,7 +203,7 @@ const genOutlinedDashedButtonStyle = (
 });
 
 const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
-  [`&${token.componentCls}-dashed`]: {
+  [`&${token.componentCls}-variant-dashed`]: {
     borderStyle: 'dashed',
   },
 });
@@ -214,7 +214,7 @@ const genFilledButtonStyle = (
   hoverStyle: CSSObject,
   activeStyle: CSSObject,
 ) => ({
-  [`&${token.componentCls}-filled`]: {
+  [`&${token.componentCls}-variant-filled`]: {
     boxShadow: 'none',
     background,
 
@@ -229,7 +229,7 @@ const genTextLinkButtonStyle = (
   hoverStyle: CSSObject,
   activeStyle: CSSObject,
 ) => ({
-  [`&${token.componentCls}-${variant}`]: {
+  [`&${token.componentCls}-variant-${variant}`]: {
     color: textColor,
     boxShadow: 'none',
 
@@ -255,22 +255,6 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
     },
   ),
 
-  ...genOutlinedDashedButtonStyle(
-    token,
-    token.defaultBorderColor,
-    token.defaultBg,
-    {
-      color: token.defaultHoverColor,
-      borderColor: token.defaultHoverBorderColor,
-      background: token.defaultHoverBg,
-    },
-    {
-      color: token.defaultActiveColor,
-      borderColor: token.defaultActiveBorderColor,
-      background: token.defaultActiveBg,
-    },
-  ),
-
   ...genDashedButtonStyle(token),
 
   ...genFilledButtonStyle(
@@ -284,19 +268,6 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
     },
   ),
 
-  ...genTextLinkButtonStyle(
-    token,
-    token.textTextColor,
-    'text',
-    {
-      color: token.textTextHoverColor,
-      background: token.textHoverBg,
-    },
-    {
-      color: token.textTextActiveColor,
-      background: token.colorBgTextActive,
-    },
-  ),
   ...genTextLinkButtonStyle(
     token,
     token.textTextColor,
@@ -325,18 +296,6 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
 
   boxShadow: token.primaryShadow,
 
-  ...genSolidButtonStyle(
-    token,
-    token.primaryColor,
-    token.colorPrimary,
-    {
-      background: token.colorPrimaryHover,
-    },
-    {
-      background: token.colorPrimaryActive,
-    },
-  ),
-
   ...genOutlinedDashedButtonStyle(
     token,
     token.colorPrimary,
@@ -368,7 +327,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
 
   ...genTextLinkButtonStyle(
     token,
-    token.colorPrimary,
+    token.colorLink,
     'text',
     {
       color: token.colorPrimaryTextHover,
@@ -380,19 +339,6 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
     },
   ),
 
-  ...genTextLinkButtonStyle(
-    token,
-    token.colorPrimary,
-    'link',
-    {
-      color: token.colorPrimaryTextHover,
-      background: token.linkHoverBg,
-    },
-    {
-      color: token.colorPrimaryTextActive,
-    },
-  ),
-
   ...genGhostButtonStyle(
     token.componentCls,
     token.ghostBg,
@@ -502,12 +448,76 @@ const genColorButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls } = token;
 
   return {
-    [`${componentCls}-default`]: genDefaultButtonStyle(token),
-    [`${componentCls}-primary`]: genPrimaryButtonStyle(token),
-    [`${componentCls}-dangerous`]: genDangerousStyle(token),
+    [`${componentCls}-color-default`]: genDefaultButtonStyle(token),
+    [`${componentCls}-color-primary`]: genPrimaryButtonStyle(token),
+    [`${componentCls}-color-dangerous`]: genDangerousStyle(token),
   };
 };
 
+// =========== Compatible with versions earlier than 5.21.0 ===========
+const genCompatibleButtonStyle: GenerateStyle<ButtonToken> = (token) => ({
+  // default + outlined
+  ...genOutlinedDashedButtonStyle(
+    token,
+    token.defaultBorderColor,
+    token.defaultBg,
+    {
+      color: token.defaultHoverColor,
+      borderColor: token.defaultHoverBorderColor,
+      background: token.defaultHoverBg,
+    },
+    {
+      color: token.defaultActiveColor,
+      borderColor: token.defaultActiveBorderColor,
+      background: token.defaultActiveBg,
+    },
+  ),
+
+  // default + text
+  ...genTextLinkButtonStyle(
+    token,
+    token.textTextColor,
+    'text',
+    {
+      color: token.textTextHoverColor,
+      background: token.textHoverBg,
+    },
+    {
+      color: token.textTextActiveColor,
+      background: token.colorBgTextActive,
+    },
+  ),
+
+  // primary + solid
+  ...genSolidButtonStyle(
+    token,
+    token.primaryColor,
+    token.colorPrimary,
+    {
+      background: token.colorPrimaryHover,
+      color: token.primaryColor,
+    },
+    {
+      background: token.colorPrimaryActive,
+      color: token.primaryColor,
+    },
+  ),
+
+  // primary + link
+  ...genTextLinkButtonStyle(
+    token,
+    token.colorLink,
+    'link',
+    {
+      color: token.colorLinkHover,
+      background: token.linkHoverBg,
+    },
+    {
+      color: token.colorLinkActive,
+    },
+  ),
+});
+
 // =============================== Size ===============================
 const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation => {
   const {
@@ -641,6 +651,9 @@ export default genStyleHooks(
       // Color
       genColorButtonStyle(buttonToken),
 
+      // https://github.com/ant-design/ant-design/issues/50969
+      genCompatibleButtonStyle(buttonToken),
+
       // Button Group
       genGroupStyle(buttonToken),
     ];

components/button/style/token.ts

@@ -283,7 +283,7 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
     textTextColor: token.colorText,
     textTextHoverColor: token.colorText,
     textTextActiveColor: token.colorText,
-    textHoverBg: token.colorBgTextHover,
+    textHoverBg: token.colorFillTertiary,
     defaultColor: token.colorText,
     defaultBg: token.colorBgContainer,
     defaultBorderColor: token.colorBorder,

components/calendar/index.en-US.md

@@ -34,17 +34,11 @@ Common props ref：[Common props](/docs/react/common-props)
 // import 'dayjs/locale/zh-cn';
 // dayjs.locale('zh-cn');
 
-<Calendar
-  dateCellRender={dateCellRender}
-  monthCellRender={monthCellRender}
-  onPanelChange={onPanelChange}
-  onSelect={onSelect}
-/>
+<Calendar cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />
 ```
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - |  |
 | cellRender | Customize cell content | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - |  |
 | fullCellRender | Customize cell content | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
@@ -54,8 +48,6 @@ Common props ref：[Common props](/docs/react/common-props)
 | headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 | locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | The display mode of the calendar | `month` \| `year` | `month` |  |
-| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - |  |
-| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - |  |
 | validRange | To set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | value | The current selected date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback for when date changes | function(date: Dayjs) | - |  |

components/calendar/index.zh-CN.md

@@ -35,17 +35,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 // import 'dayjs/locale/zh-cn';
 // dayjs.locale('zh-cn');
 
-<Calendar
-  dateCellRender={dateCellRender}
-  monthCellRender={monthCellRender}
-  onPanelChange={onPanelChange}
-  onSelect={onSelect}
-/>
+<Calendar cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />
 ```
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格，>= 5.4.0 请用 `cellRender` | function(date: Dayjs): ReactNode | - | < 5.4.0 |
 | cellRender | 自定义单元格的内容 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格，>= 5.4.0 请用 `fullCellRender` | function(date: Dayjs): ReactNode | - | < 5.4.0 |
 | fullCellRender | 自定义单元格的内容 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
@@ -55,8 +49,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 | headerRender | 自定义头部内容 | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 | locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | 初始模式 | `month` \| `year` | `month` |  |
-| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格，>= 5.4.0 请用 `cellRender` | function(date: Dayjs): ReactNode | - | < 5.4.0 |
-| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格，>= 5.4.0 请用 `fullCellRender` | function(date: Dayjs): ReactNode | - | < 5.4.0 |
 | validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | value | 展示日期 | [dayjs](https://day.js.org/) | - |  |
 | onChange | 日期变化回调 | function(date: Dayjs) | - |  |

components/card/__tests__/__snapshots__/index.test.tsx.snap

@@ -378,7 +378,7 @@ exports[`Card title should be vertically aligned 1`] = `
         class="ant-card-extra"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>

components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -143,7 +143,7 @@ Array [
   </p>,
   <p>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
       type="button"
     >
       <span>
@@ -151,7 +151,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
       style="margin: 0px 10px;"
       type="button"
     >

components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap

@@ -139,7 +139,7 @@ Array [
   </p>,
   <p>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
       type="button"
     >
       <span>
@@ -147,7 +147,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
       style="margin:0 10px"
       type="button"
     >

components/collapse/index.en-US.md

@@ -81,7 +81,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | accordion | If true, Collapse renders as Accordion | boolean | false |  |
 | activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In [accordion mode](#collapse-demo-accordion), it's the key of the first panel |  |
 | bordered | Toggles rendering of the border around the collapse block | boolean | true |  |
-| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
+| collapsible | Specify how to trigger Collapse. Either by clicking icon or by clicking any area in header or disable collapse functionality itself | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |
 | destroyInactivePanel | Destroy Inactive Panel | boolean | false |  |
 | expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - |  |

components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -10949,7 +10949,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
 exports[`renders components/color-picker/demo/trigger.tsx extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     style="background-color: rgb(22, 119, 255);"
     type="button"
   >

components/color-picker/__tests__/__snapshots__/demo.test.tsx.snap

@@ -637,7 +637,7 @@ exports[`renders components/color-picker/demo/text-render.tsx correctly 1`] = `
 
 exports[`renders components/color-picker/demo/trigger.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   style="background-color:#1677ff"
   type="button"
 >

components/color-picker/__tests__/gradient.test.tsx

@@ -306,4 +306,38 @@ describe('ColorPicker.gradient', () => {
 
     expect(container.querySelector('.ant-color-picker-gradient-slider')).toBeTruthy();
   });
+
+  // This test case may easily break by jsdom update
+  // https://github.com/ant-design/ant-design/issues/51159
+  it('change color 2 should not be color 1', () => {
+    const { container } = render(
+      <ColorPicker
+        mode={['gradient']}
+        open
+        defaultValue={[
+          {
+            color: '#FF0000',
+            percent: 0,
+          },
+          {
+            color: '#0000FF',
+            percent: 100,
+          },
+        ]}
+      />,
+    );
+
+    // Select second one
+    const handle2 = container.querySelector<HTMLElement>('.ant-slider-handle-2')!;
+    doDrag(container, 0, 0, handle2, true);
+
+    // Drag in the color panel
+    const panelHandle = container.querySelector('.ant-color-picker-saturation')!;
+    const mouseDown = createEvent.mouseDown(panelHandle);
+    fireEvent(panelHandle, mouseDown);
+
+    expect(handle2).not.toHaveStyle({
+      backgroundColor: 'rgb(255,0,0)',
+    });
+  });
 });

components/color-picker/components/ColorSlider.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { BaseSliderProps } from '@rc-component/color-picker';
 import classNames from 'classnames';
 import { UnstableContext } from 'rc-slider';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 
 import type { GetContextProp, GetProp } from '../../_util/type';
 import Slider from '../../slider';

components/color-picker/components/PanelPicker/index.tsx

@@ -137,7 +137,7 @@ const PanelPicker: FC = () => {
     info?: Info,
   ) => {
     const nextColor = fillColor(colorValue, info);
-    setPickerColor(nextColor);
+    setPickerColor(nextColor.isGradient() ? nextColor.getColors()[activeIndex].color : nextColor);
     onChange(nextColor, fromPicker);
   };
 

components/color-picker/hooks/useModeColor.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useEvent, useMergedState } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
 import { useLocale } from '../../locale';
 import type { AggregationColor } from '../color';

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -1348,7 +1348,7 @@ exports[`ConfigProvider components Breadcrumb prefixCls 1`] = `
 exports[`ConfigProvider components Button configProvider 1`] = `
 <div>
   <button
-    class="config-btn config-btn-default config-btn-outlined"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -1359,7 +1359,7 @@ exports[`ConfigProvider components Button configProvider 1`] = `
     class="config-btn-group"
   >
     <button
-      class="config-btn config-btn-default config-btn-outlined"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -1367,7 +1367,7 @@ exports[`ConfigProvider components Button configProvider 1`] = `
       </span>
     </button>
     <button
-      class="config-btn config-btn-default config-btn-outlined"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -1381,7 +1381,7 @@ exports[`ConfigProvider components Button configProvider 1`] = `
 exports[`ConfigProvider components Button configProvider componentDisabled 1`] = `
 <div>
   <button
-    class="config-btn config-btn-default config-btn-outlined"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
     disabled=""
     type="button"
   >
@@ -1393,7 +1393,7 @@ exports[`ConfigProvider components Button configProvider componentDisabled 1`] =
     class="config-btn-group"
   >
     <button
-      class="config-btn config-btn-default config-btn-outlined"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
       disabled=""
       type="button"
     >
@@ -1402,7 +1402,7 @@ exports[`ConfigProvider components Button configProvider componentDisabled 1`] =
       </span>
     </button>
     <button
-      class="config-btn config-btn-default config-btn-outlined"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
       disabled=""
       type="button"
     >
@@ -1417,7 +1417,7 @@ exports[`ConfigProvider components Button configProvider componentDisabled 1`] =
 exports[`ConfigProvider components Button configProvider componentSize large 1`] = `
 <div>
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-lg"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg"
     type="button"
   >
     <span>
@@ -1428,7 +1428,7 @@ exports[`ConfigProvider components Button configProvider componentSize large 1`]
     class="config-btn-group"
   >
     <button
-      class="config-btn config-btn-default config-btn-outlined config-btn-lg"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg"
       type="button"
     >
       <span>
@@ -1436,7 +1436,7 @@ exports[`ConfigProvider components Button configProvider componentSize large 1`]
       </span>
     </button>
     <button
-      class="config-btn config-btn-default config-btn-outlined config-btn-lg"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg"
       type="button"
     >
       <span>
@@ -1450,7 +1450,7 @@ exports[`ConfigProvider components Button configProvider componentSize large 1`]
 exports[`ConfigProvider components Button configProvider componentSize middle 1`] = `
 <div>
   <button
-    class="config-btn config-btn-default config-btn-outlined"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -1461,7 +1461,7 @@ exports[`ConfigProvider components Button configProvider componentSize middle 1`
     class="config-btn-group"
   >
     <button
-      class="config-btn config-btn-default config-btn-outlined"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -1469,7 +1469,7 @@ exports[`ConfigProvider components Button configProvider componentSize middle 1`
       </span>
     </button>
     <button
-      class="config-btn config-btn-default config-btn-outlined"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -1483,7 +1483,7 @@ exports[`ConfigProvider components Button configProvider componentSize middle 1`
 exports[`ConfigProvider components Button configProvider componentSize small 1`] = `
 <div>
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
     type="button"
   >
     <span>
@@ -1494,7 +1494,7 @@ exports[`ConfigProvider components Button configProvider componentSize small 1`]
     class="config-btn-group"
   >
     <button
-      class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
       type="button"
     >
       <span>
@@ -1502,7 +1502,7 @@ exports[`ConfigProvider components Button configProvider componentSize small 1`]
       </span>
     </button>
     <button
-      class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+      class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
       type="button"
     >
       <span>
@@ -1516,7 +1516,7 @@ exports[`ConfigProvider components Button configProvider componentSize small 1`]
 exports[`ConfigProvider components Button normal 1`] = `
 <div>
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -1527,7 +1527,7 @@ exports[`ConfigProvider components Button normal 1`] = `
     class="ant-btn-group"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -1535,7 +1535,7 @@ exports[`ConfigProvider components Button normal 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -1549,7 +1549,7 @@ exports[`ConfigProvider components Button normal 1`] = `
 exports[`ConfigProvider components Button prefixCls 1`] = `
 <div>
   <button
-    class="prefix-Button prefix-Button-default prefix-Button-outlined"
+    class="prefix-Button prefix-Button-default prefix-Button-color-default prefix-Button-variant-outlined"
     type="button"
   >
     <span>
@@ -1560,7 +1560,7 @@ exports[`ConfigProvider components Button prefixCls 1`] = `
     class="prefix-Button"
   >
     <button
-      class="prefix-Button prefix-Button-default prefix-Button-outlined"
+      class="prefix-Button prefix-Button-default prefix-Button-color-default prefix-Button-variant-outlined"
       type="button"
     >
       <span>
@@ -1568,7 +1568,7 @@ exports[`ConfigProvider components Button prefixCls 1`] = `
       </span>
     </button>
     <button
-      class="prefix-Button prefix-Button-default prefix-Button-outlined"
+      class="prefix-Button prefix-Button-default prefix-Button-color-default prefix-Button-variant-outlined"
       type="button"
     >
       <span>
@@ -14688,7 +14688,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
   class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-compact-item config-btn-compact-first-item"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-compact-item config-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -14696,7 +14696,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     type="button"
   >
     <span
@@ -14731,7 +14731,7 @@ exports[`ConfigProvider components Dropdown configProvider componentDisabled 1`]
   class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-compact-item config-btn-compact-first-item"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-compact-item config-btn-compact-first-item"
     disabled=""
     type="button"
   >
@@ -14740,7 +14740,7 @@ exports[`ConfigProvider components Dropdown configProvider componentDisabled 1`]
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     disabled=""
     type="button"
   >
@@ -14776,7 +14776,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
   class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-lg config-btn-compact-item config-btn-compact-first-item"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg config-btn-compact-item config-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -14784,7 +14784,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-lg config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     type="button"
   >
     <span
@@ -14819,7 +14819,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
   class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-compact-item config-btn-compact-first-item"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-compact-item config-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -14827,7 +14827,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     type="button"
   >
     <span
@@ -14862,7 +14862,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize small 1
   class="config-space-compact config-space-compact-block config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-sm config-btn-compact-item config-btn-compact-first-item"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm config-btn-compact-item config-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -14870,7 +14870,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize small 1
     </span>
   </button>
   <button
-    class="config-btn config-btn-default config-btn-outlined config-btn-sm config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm config-btn-icon-only config-btn-compact-item config-btn-compact-last-item config-dropdown-trigger"
     type="button"
   >
     <span
@@ -14905,7 +14905,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
   class="ant-space-compact ant-space-compact-block ant-dropdown-button"
 >
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -14913,7 +14913,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -14948,7 +14948,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
   class="ant-space-compact ant-space-compact-block prefix-Dropdown-button"
 >
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
     type="button"
   >
     <span>
@@ -14956,7 +14956,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -16006,7 +16006,7 @@ exports[`ConfigProvider components Input configProvider 1`] = `
           class="config-input-group-addon"
         >
           <button
-            class="config-btn config-btn-default config-btn-outlined config-btn-icon-only config-input-search-button"
+            class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-input-search-button"
             type="button"
           >
             <span
@@ -16106,7 +16106,7 @@ exports[`ConfigProvider components Input configProvider componentDisabled 1`] =
           class="config-input-group-addon"
         >
           <button
-            class="config-btn config-btn-default config-btn-outlined config-btn-icon-only config-input-search-button"
+            class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-input-search-button"
             disabled=""
             type="button"
           >
@@ -16207,7 +16207,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
           class="config-input-group-addon"
         >
           <button
-            class="config-btn config-btn-default config-btn-outlined config-btn-lg config-btn-icon-only config-input-search-button"
+            class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg config-btn-icon-only config-input-search-button"
             type="button"
           >
             <span
@@ -16305,7 +16305,7 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
           class="config-input-group-addon"
         >
           <button
-            class="config-btn config-btn-default config-btn-outlined config-btn-icon-only config-input-search-button"
+            class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-icon-only config-input-search-button"
             type="button"
           >
             <span
@@ -16403,7 +16403,7 @@ exports[`ConfigProvider components Input configProvider componentSize small 1`]
           class="config-input-group-addon"
         >
           <button
-            class="config-btn config-btn-default config-btn-outlined config-btn-sm config-btn-icon-only config-input-search-button"
+            class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm config-btn-icon-only config-input-search-button"
             type="button"
           >
             <span
@@ -16501,7 +16501,7 @@ exports[`ConfigProvider components Input normal 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -16599,7 +16599,7 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only prefix-Input-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only prefix-Input-button"
             type="button"
           >
             <span
@@ -18370,7 +18370,7 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
               class="config-modal-footer"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
                 type="button"
               >
                 <span>
@@ -18378,7 +18378,7 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid"
                 type="button"
               >
                 <span>
@@ -18462,7 +18462,7 @@ exports[`ConfigProvider components Modal configProvider componentDisabled 1`] =
               class="config-modal-footer"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
                 type="button"
               >
                 <span>
@@ -18470,7 +18470,7 @@ exports[`ConfigProvider components Modal configProvider componentDisabled 1`] =
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid"
                 type="button"
               >
                 <span>
@@ -18554,7 +18554,7 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
               class="config-modal-footer"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined config-btn-lg"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-lg"
                 type="button"
               >
                 <span>
@@ -18562,7 +18562,7 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid config-btn-lg"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-lg"
                 type="button"
               >
                 <span>
@@ -18646,7 +18646,7 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
               class="config-modal-footer"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined"
                 type="button"
               >
                 <span>
@@ -18654,7 +18654,7 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid"
                 type="button"
               >
                 <span>
@@ -18738,7 +18738,7 @@ exports[`ConfigProvider components Modal configProvider componentSize small 1`]
               class="config-modal-footer"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
                 type="button"
               >
                 <span>
@@ -18746,7 +18746,7 @@ exports[`ConfigProvider components Modal configProvider componentSize small 1`]
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                 type="button"
               >
                 <span>
@@ -18830,7 +18830,7 @@ exports[`ConfigProvider components Modal normal 1`] = `
               class="ant-modal-footer"
             >
               <button
-                class="ant-btn ant-btn-default ant-btn-outlined"
+                class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                 type="button"
               >
                 <span>
@@ -18838,7 +18838,7 @@ exports[`ConfigProvider components Modal normal 1`] = `
                 </span>
               </button>
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="button"
               >
                 <span>
@@ -18922,7 +18922,7 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
               class="prefix-Modal-footer"
             >
               <button
-                class="ant-btn ant-btn-default ant-btn-outlined"
+                class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                 type="button"
               >
                 <span>
@@ -18930,7 +18930,7 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
                 </span>
               </button>
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="button"
               >
                 <span>
@@ -21037,7 +21037,7 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
               class="config-popconfirm-buttons"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
                 type="button"
               >
                 <span>
@@ -21045,7 +21045,7 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                 type="button"
               >
                 <span>
@@ -21123,7 +21123,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentDisabled 1
               class="config-popconfirm-buttons"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
                 disabled=""
                 type="button"
               >
@@ -21132,7 +21132,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentDisabled 1
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                 disabled=""
                 type="button"
               >
@@ -21211,7 +21211,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
               class="config-popconfirm-buttons"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
                 type="button"
               >
                 <span>
@@ -21219,7 +21219,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                 type="button"
               >
                 <span>
@@ -21297,7 +21297,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
               class="config-popconfirm-buttons"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
                 type="button"
               >
                 <span>
@@ -21305,7 +21305,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                 type="button"
               >
                 <span>
@@ -21383,7 +21383,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize small
               class="config-popconfirm-buttons"
             >
               <button
-                class="config-btn config-btn-default config-btn-outlined config-btn-sm"
+                class="config-btn config-btn-default config-btn-color-default config-btn-variant-outlined config-btn-sm"
                 type="button"
               >
                 <span>
@@ -21391,7 +21391,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize small
                 </span>
               </button>
               <button
-                class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                 type="button"
               >
                 <span>
@@ -21469,7 +21469,7 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
               class="ant-popconfirm-buttons"
             >
               <button
-                class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -21477,7 +21477,7 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
                 </span>
               </button>
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -21555,7 +21555,7 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
               class="prefix-Popconfirm-buttons"
             >
               <button
-                class="ant-btn ant-btn-default ant-btn-outlined ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -21563,7 +21563,7 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
                 </span>
               </button>
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -26784,7 +26784,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                             class="config-table-filter-dropdown-btns"
                           >
                             <button
-                              class="config-btn config-btn-primary config-btn-link config-btn-sm"
+                              class="config-btn config-btn-link config-btn-color-primary config-btn-variant-link config-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -26793,7 +26793,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                               </span>
                             </button>
                             <button
-                              class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                              class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                               type="button"
                             >
                               <span>
@@ -27092,7 +27092,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
                             class="config-table-filter-dropdown-btns"
                           >
                             <button
-                              class="config-btn config-btn-primary config-btn-link config-btn-sm"
+                              class="config-btn config-btn-link config-btn-color-primary config-btn-variant-link config-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -27101,7 +27101,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
                               </span>
                             </button>
                             <button
-                              class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                              class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -27400,7 +27400,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
                             class="config-table-filter-dropdown-btns"
                           >
                             <button
-                              class="config-btn config-btn-primary config-btn-link config-btn-sm"
+                              class="config-btn config-btn-link config-btn-color-primary config-btn-variant-link config-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -27409,7 +27409,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
                               </span>
                             </button>
                             <button
-                              class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                              class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                               type="button"
                             >
                               <span>
@@ -27707,7 +27707,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
                             class="config-table-filter-dropdown-btns"
                           >
                             <button
-                              class="config-btn config-btn-primary config-btn-link config-btn-sm"
+                              class="config-btn config-btn-link config-btn-color-primary config-btn-variant-link config-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -27716,7 +27716,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
                               </span>
                             </button>
                             <button
-                              class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                              class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                               type="button"
                             >
                               <span>
@@ -28014,7 +28014,7 @@ exports[`ConfigProvider components Table configProvider componentSize small 1`]
                             class="config-table-filter-dropdown-btns"
                           >
                             <button
-                              class="config-btn config-btn-primary config-btn-link config-btn-sm"
+                              class="config-btn config-btn-link config-btn-color-primary config-btn-variant-link config-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -28023,7 +28023,7 @@ exports[`ConfigProvider components Table configProvider componentSize small 1`]
                               </span>
                             </button>
                             <button
-                              class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                              class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                               type="button"
                             >
                               <span>
@@ -28321,7 +28321,7 @@ exports[`ConfigProvider components Table normal 1`] = `
                             class="ant-table-filter-dropdown-btns"
                           >
                             <button
-                              class="ant-btn ant-btn-primary ant-btn-link ant-btn-sm"
+                              class="ant-btn ant-btn-link ant-btn-color-primary ant-btn-variant-link ant-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -28330,7 +28330,7 @@ exports[`ConfigProvider components Table normal 1`] = `
                               </span>
                             </button>
                             <button
-                              class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                               type="button"
                             >
                               <span>
@@ -28628,7 +28628,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                             class="prefix-Table-filter-dropdown-btns"
                           >
                             <button
-                              class="ant-btn ant-btn-primary ant-btn-link ant-btn-sm"
+                              class="ant-btn ant-btn-link ant-btn-color-primary ant-btn-variant-link ant-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -28637,7 +28637,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                               </span>
                             </button>
                             <button
-                              class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                               type="button"
                             >
                               <span>
@@ -30999,7 +30999,7 @@ Array [
                 class="config-picker-ok"
               >
                 <button
-                  class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                  class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                   type="button"
                 >
                   <span>
@@ -32607,7 +32607,7 @@ Array [
                 class="config-picker-ok"
               >
                 <button
-                  class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                  class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                   type="button"
                 >
                   <span>
@@ -34168,7 +34168,7 @@ Array [
                 class="config-picker-ok"
               >
                 <button
-                  class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                  class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                   type="button"
                 >
                   <span>
@@ -35729,7 +35729,7 @@ Array [
                 class="config-picker-ok"
               >
                 <button
-                  class="config-btn config-btn-primary config-btn-solid config-btn-sm"
+                  class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm"
                   type="button"
                 >
                   <span>
@@ -37290,7 +37290,7 @@ Array [
                 class="ant-picker-ok"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -38851,7 +38851,7 @@ Array [
                 class="prefix-TimePicker-ok"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -39341,7 +39341,7 @@ exports[`ConfigProvider components Transfer configProvider 1`] = `
     class="config-transfer-operation"
   >
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -39370,7 +39370,7 @@ exports[`ConfigProvider components Transfer configProvider 1`] = `
       </span>
     </button>
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -39626,7 +39626,7 @@ exports[`ConfigProvider components Transfer configProvider componentDisabled 1`]
     class="config-transfer-operation"
   >
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -39655,7 +39655,7 @@ exports[`ConfigProvider components Transfer configProvider componentDisabled 1`]
       </span>
     </button>
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -39911,7 +39911,7 @@ exports[`ConfigProvider components Transfer configProvider componentSize large 1
     class="config-transfer-operation"
   >
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -39940,7 +39940,7 @@ exports[`ConfigProvider components Transfer configProvider componentSize large 1
       </span>
     </button>
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -40196,7 +40196,7 @@ exports[`ConfigProvider components Transfer configProvider componentSize middle
     class="config-transfer-operation"
   >
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -40225,7 +40225,7 @@ exports[`ConfigProvider components Transfer configProvider componentSize middle
       </span>
     </button>
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -40481,7 +40481,7 @@ exports[`ConfigProvider components Transfer configProvider componentSize small 1
     class="config-transfer-operation"
   >
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -40510,7 +40510,7 @@ exports[`ConfigProvider components Transfer configProvider componentSize small 1
       </span>
     </button>
     <button
-      class="config-btn config-btn-primary config-btn-solid config-btn-sm config-btn-icon-only"
+      class="config-btn config-btn-primary config-btn-color-primary config-btn-variant-solid config-btn-sm config-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -40766,7 +40766,7 @@ exports[`ConfigProvider components Transfer normal 1`] = `
     class="ant-transfer-operation"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -40795,7 +40795,7 @@ exports[`ConfigProvider components Transfer normal 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -41051,7 +41051,7 @@ exports[`ConfigProvider components Transfer prefixCls 1`] = `
     class="prefix-Transfer-operation"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -41080,7 +41080,7 @@ exports[`ConfigProvider components Transfer prefixCls 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -43258,7 +43258,7 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
           class="config-upload-list-item-actions"
         >
           <button
-            class="config-btn config-btn-default config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
+            class="config-btn config-btn-text config-btn-color-default config-btn-variant-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
             title="Remove file"
             type="button"
           >
@@ -43422,7 +43422,7 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
           class="config-upload-list-item-actions"
         >
           <button
-            class="config-btn config-btn-default config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
+            class="config-btn config-btn-text config-btn-color-default config-btn-variant-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
             title="Remove file"
             type="button"
           >
@@ -43519,7 +43519,7 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
           class="config-upload-list-item-actions"
         >
           <button
-            class="config-btn config-btn-default config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
+            class="config-btn config-btn-text config-btn-color-default config-btn-variant-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
             title="Remove file"
             type="button"
           >
@@ -43616,7 +43616,7 @@ exports[`ConfigProvider components Upload configProvider componentSize small 1`]
           class="config-upload-list-item-actions"
         >
           <button
-            class="config-btn config-btn-default config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
+            class="config-btn config-btn-text config-btn-color-default config-btn-variant-text config-btn-sm config-btn-icon-only config-upload-list-item-action"
             title="Remove file"
             type="button"
           >
@@ -43713,7 +43713,7 @@ exports[`ConfigProvider components Upload normal 1`] = `
           class="ant-upload-list-item-actions"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
+            class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
             title="Remove file"
             type="button"
           >
@@ -43810,7 +43810,7 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
           class="prefix-Upload-list-item-actions"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-text ant-btn-sm ant-btn-icon-only prefix-Upload-list-item-action"
+            class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only prefix-Upload-list-item-action"
             title="Remove file"
             type="button"
           >

components/config-provider/index.en-US.md

@@ -9,7 +9,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAA
 
 ## Usage
 
-This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config.
+This component provides a configuration to all React components underneath itself via the [context API](https://react.dev/learn/passing-data-deeply-with-context). In the render tree all components will have access to the provided config.
 
 ```tsx
 import React from 'react';

components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -5907,7 +5907,7 @@ exports[`renders components/date-picker/demo/buddhist-era.tsx extend context cor
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                     type="button"
                   >
                     <span>
@@ -8694,7 +8694,7 @@ exports[`renders components/date-picker/demo/buddhist-era.tsx extend context cor
                       class="ant-picker-ok"
                     >
                       <button
-                        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                         type="button"
                       >
                         <span>
@@ -10667,7 +10667,7 @@ exports[`renders components/date-picker/demo/components.tsx extend context corre
                   </div>
                 </div>
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="button"
                 >
                   <span>
@@ -17369,7 +17369,7 @@ exports[`renders components/date-picker/demo/disabled-date.tsx extend context co
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                     disabled=""
                     type="button"
                   >
@@ -20438,7 +20438,7 @@ exports[`renders components/date-picker/demo/disabled-date.tsx extend context co
                     class="ant-picker-ok"
                   >
                     <button
-                      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                       disabled=""
                       type="button"
                     >
@@ -23181,7 +23181,7 @@ exports[`renders components/date-picker/demo/extra-footer.tsx extend context cor
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                     disabled=""
                     type="button"
                   >
@@ -26542,7 +26542,7 @@ exports[`renders components/date-picker/demo/extra-footer.tsx extend context cor
                     class="ant-picker-ok"
                   >
                     <button
-                      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                       disabled=""
                       type="button"
                     >
@@ -40698,7 +40698,7 @@ exports[`renders components/date-picker/demo/mode.tsx extend context correctly 1
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                     disabled=""
                     type="button"
                   >
@@ -47196,7 +47196,7 @@ Array [
                 class="ant-picker-ok"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                   disabled=""
                   type="button"
                 >
@@ -53128,7 +53128,7 @@ exports[`renders components/date-picker/demo/preset-ranges.tsx extend context co
                     class="ant-picker-ok"
                   >
                     <button
-                      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                       disabled=""
                       type="button"
                     >
@@ -56486,7 +56486,7 @@ exports[`renders components/date-picker/demo/range-picker.tsx extend context cor
                     class="ant-picker-ok"
                   >
                     <button
-                      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                       disabled=""
                       type="button"
                     >
@@ -66358,7 +66358,7 @@ exports[`renders components/date-picker/demo/start-end.tsx extend context correc
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                     disabled=""
                     type="button"
                   >
@@ -68463,7 +68463,7 @@ exports[`renders components/date-picker/demo/start-end.tsx extend context correc
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                     disabled=""
                     type="button"
                   >
@@ -79285,7 +79285,7 @@ exports[`renders components/date-picker/demo/switchable.tsx extend context corre
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                     disabled=""
                     type="button"
                   >
@@ -81400,7 +81400,7 @@ exports[`renders components/date-picker/demo/time.tsx extend context correctly 1
                   class="ant-picker-ok"
                 >
                   <button
-                    class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                     disabled=""
                     type="button"
                   >
@@ -82942,7 +82942,7 @@ exports[`renders components/date-picker/demo/time.tsx extend context correctly 1
                     class="ant-picker-ok"
                   >
                     <button
-                      class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                       disabled=""
                       type="button"
                     >

components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -655,7 +655,7 @@ exports[`renders components/descriptions/demo/component-token.tsx extend context
         class="ant-descriptions-extra"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>
@@ -1565,7 +1565,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly
         class="ant-descriptions-extra"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>
@@ -1751,7 +1751,7 @@ exports[`renders components/descriptions/demo/size.tsx extend context correctly
         class="ant-descriptions-extra"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>

components/descriptions/__tests__/__snapshots__/demo.test.ts.snap

@@ -599,7 +599,7 @@ exports[`renders components/descriptions/demo/component-token.tsx correctly 1`]
         class="ant-descriptions-extra"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>
@@ -1453,7 +1453,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = `
         class="ant-descriptions-extra"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>
@@ -1623,7 +1623,7 @@ exports[`renders components/descriptions/demo/size.tsx correctly 1`] = `
         class="ant-descriptions-extra"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           type="button"
         >
           <span>

components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders components/drawer/demo/basic-right.tsx extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -107,7 +107,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -119,7 +119,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -385,7 +385,7 @@ exports[`renders components/drawer/demo/config-provider.tsx extend context corre
   class="site-drawer-render-in-current-wrapper"
 >
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -575,7 +575,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -654,7 +654,7 @@ Array [
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>
@@ -666,7 +666,7 @@ Array [
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="button"
                 >
                   <span>
@@ -707,7 +707,7 @@ exports[`renders components/drawer/demo/extra.tsx extend context correctly 2`] =
 exports[`renders components/drawer/demo/form-in-drawer.tsx extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span
@@ -810,7 +810,7 @@ Array [
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>
@@ -822,7 +822,7 @@ Array [
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="button"
                 >
                   <span>
@@ -2796,7 +2796,7 @@ exports[`renders components/drawer/demo/form-in-drawer.tsx extend context correc
 exports[`renders components/drawer/demo/loading.tsx extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -2906,7 +2906,7 @@ exports[`renders components/drawer/demo/loading.tsx extend context correctly 2`]
 exports[`renders components/drawer/demo/multi-level-drawer.tsx extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -2952,7 +2952,7 @@ Array [
           class="ant-drawer-body"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
             type="button"
           >
             <span>
@@ -3027,7 +3027,7 @@ exports[`renders components/drawer/demo/multi-level-drawer.tsx extend context co
 exports[`renders components/drawer/demo/no-mask.tsx extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -3213,7 +3213,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -3293,7 +3293,7 @@ exports[`renders components/drawer/demo/render-in-current.tsx extend context cor
     style="margin-top: 16px;"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -3780,7 +3780,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -3792,7 +3792,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
         type="button"
       >
         <span>
@@ -3871,7 +3871,7 @@ Array [
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>
@@ -3883,7 +3883,7 @@ Array [
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="button"
                 >
                   <span>

components/drawer/__tests__/__snapshots__/demo.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`renders components/drawer/demo/basic-right.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span>
@@ -19,7 +19,7 @@ exports[`renders components/drawer/demo/classNames.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -31,7 +31,7 @@ exports[`renders components/drawer/demo/classNames.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -108,7 +108,7 @@ exports[`renders components/drawer/demo/config-provider.tsx correctly 1`] = `
   class="site-drawer-render-in-current-wrapper"
 >
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -211,7 +211,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -224,7 +224,7 @@ exports[`renders components/drawer/demo/extra.tsx correctly 1`] = `
 
 exports[`renders components/drawer/demo/form-in-drawer.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span
@@ -261,7 +261,7 @@ exports[`renders components/drawer/demo/form-in-drawer.tsx correctly 1`] = `
 
 exports[`renders components/drawer/demo/loading.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span>
@@ -272,7 +272,7 @@ exports[`renders components/drawer/demo/loading.tsx correctly 1`] = `
 
 exports[`renders components/drawer/demo/multi-level-drawer.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span>
@@ -283,7 +283,7 @@ exports[`renders components/drawer/demo/multi-level-drawer.tsx correctly 1`] = `
 
 exports[`renders components/drawer/demo/no-mask.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span>
@@ -385,7 +385,7 @@ exports[`renders components/drawer/demo/placement.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -405,7 +405,7 @@ exports[`renders components/drawer/demo/render-in-current.tsx correctly 1`] = `
     style="margin-top:16px"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -608,7 +608,7 @@ exports[`renders components/drawer/demo/size.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -620,7 +620,7 @@ exports[`renders components/drawer/demo/size.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>

components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -15,7 +15,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -151,7 +151,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -287,7 +287,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -432,7 +432,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -568,7 +568,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -704,7 +704,7 @@ exports[`renders components/dropdown/demo/arrow.tsx extend context correctly 1`]
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -858,7 +858,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -994,7 +994,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1130,7 +1130,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1275,7 +1275,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1411,7 +1411,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1547,7 +1547,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx extend context correc
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -2191,7 +2191,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
             type="button"
           >
             <span>
@@ -2219,7 +2219,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -2227,7 +2227,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -2471,7 +2471,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -2479,7 +2479,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -2723,7 +2723,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         disabled=""
         type="button"
       >
@@ -2732,7 +2732,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         disabled=""
         type="button"
       >
@@ -2977,7 +2977,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -3004,7 +3004,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
         </div>
       </div>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -3245,7 +3245,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
       type="button"
     >
       <div
@@ -3497,7 +3497,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -3505,7 +3505,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx extend context cor
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -4117,7 +4117,7 @@ exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctl
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -4125,7 +4125,7 @@ exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctl
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -4347,7 +4347,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span
@@ -4379,7 +4379,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -4460,7 +4460,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span
@@ -4492,7 +4492,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -4573,7 +4573,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -4581,7 +4581,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -4662,7 +4662,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -4670,7 +4670,7 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -5703,7 +5703,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -5836,7 +5836,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -5969,7 +5969,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -6111,7 +6111,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -6244,7 +6244,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -6377,7 +6377,7 @@ exports[`renders components/dropdown/demo/placement.tsx extend context correctly
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>

components/dropdown/__tests__/__snapshots__/demo.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -27,7 +27,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -39,7 +39,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -60,7 +60,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -72,7 +72,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -84,7 +84,7 @@ exports[`renders components/dropdown/demo/arrow.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -112,7 +112,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -124,7 +124,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -136,7 +136,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -157,7 +157,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -169,7 +169,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -181,7 +181,7 @@ exports[`renders components/dropdown/demo/arrow-center.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -293,7 +293,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -301,7 +301,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -337,7 +337,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -345,7 +345,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -381,7 +381,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         disabled=""
         type="button"
       >
@@ -390,7 +390,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         disabled=""
         type="button"
       >
@@ -427,7 +427,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -435,7 +435,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -468,7 +468,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
       type="button"
     >
       <div
@@ -512,7 +512,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -520,7 +520,7 @@ exports[`renders components/dropdown/demo/dropdown-button.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-dangerous ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -641,7 +641,7 @@ exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -649,7 +649,7 @@ exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -731,7 +731,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span
@@ -762,7 +762,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -798,7 +798,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-loading ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span
@@ -829,7 +829,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -865,7 +865,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -873,7 +873,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -909,7 +909,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
       class="ant-space-compact ant-space-compact-block ant-dropdown-button"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
         type="button"
       >
         <span>
@@ -917,7 +917,7 @@ exports[`renders components/dropdown/demo/loading.tsx correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -1042,7 +1042,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1054,7 +1054,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1066,7 +1066,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1087,7 +1087,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1099,7 +1099,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -1111,7 +1111,7 @@ exports[`renders components/dropdown/demo/placement.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-dropdown-trigger"
           type="button"
         >
           <span>

components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap

@@ -5,11 +5,11 @@ exports[`DropdownButton rtl render component should be rendered correctly in RTL
   class="ant-space-compact ant-space-compact-rtl ant-space-compact-block ant-dropdown-button"
 >
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-rtl ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-item-rtl"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-rtl ant-btn-compact-item ant-btn-compact-first-item ant-btn-compact-item-rtl"
     type="button"
   />
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-rtl ant-btn-compact-item ant-btn-compact-last-item ant-btn-compact-item-rtl ant-dropdown-trigger ant-dropdown-rtl"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-rtl ant-btn-compact-item ant-btn-compact-last-item ant-btn-compact-item-rtl ant-dropdown-trigger ant-dropdown-rtl"
     type="button"
   >
     <span
@@ -44,12 +44,12 @@ exports[`DropdownButton should support href like Button 1`] = `
   class="ant-space-compact ant-space-compact-block ant-dropdown-button"
 >
   <a
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-compact-item ant-btn-compact-first-item"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-item ant-btn-compact-first-item"
     href="https://ant.design"
     tabindex="0"
   />
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
     type="button"
   >
     <span

components/dropdown/dropdown.tsx

@@ -3,7 +3,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
 import type { AlignType } from '@rc-component/trigger';
 import classNames from 'classnames';
 import RcDropdown from 'rc-dropdown';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import omit from 'rc-util/lib/omit';
 

components/dropdown/style/index.ts

@@ -96,6 +96,12 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
           content: '""',
         },
 
+        // Makes vertical dropdowns have a scrollbar once they become taller than the viewport.
+        '&-menu-vertical': {
+          maxHeight: '100vh',
+          overflowY: 'auto',
+        },
+
         [`&-trigger${antCls}-btn`]: {
           [`& > ${iconCls}-down, & > ${antCls}-btn-icon > ${iconCls}-down`]: {
             fontSize: fontSizeIcon,

components/empty/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -628,7 +628,7 @@ Array [
           class="ant-transfer-operation"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
             disabled=""
             type="button"
           >
@@ -657,7 +657,7 @@ Array [
             </span>
           </button>
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
             disabled=""
             type="button"
           >
@@ -1038,7 +1038,7 @@ exports[`renders components/empty/demo/customize.tsx extend context correctly 1`
     class="ant-empty-footer"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>

components/empty/__tests__/__snapshots__/demo.test.ts.snap

@@ -419,7 +419,7 @@ Array [
           class="ant-transfer-operation"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
             disabled=""
             type="button"
           >
@@ -448,7 +448,7 @@ Array [
             </span>
           </button>
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm ant-btn-icon-only"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
             disabled=""
             type="button"
           >
@@ -756,7 +756,7 @@ exports[`renders components/empty/demo/customize.tsx correctly 1`] = `
     class="ant-empty-footer"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>

components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -181,7 +181,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
     style="width: 100%; height: 120px; border-radius: 6px; border: 1px solid #40a9ff;"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -189,7 +189,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -197,7 +197,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -205,7 +205,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -313,7 +313,7 @@ exports[`renders components/flex/demo/combination.tsx extend context correctly 1
           “antd is an enterprise-class UI design language and React UI library.”
         </h3>
         <a
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           href="https://ant.design"
           tabindex="0"
           target="_blank"
@@ -459,7 +459,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
     class="ant-flex ant-flex-gap-small"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -467,7 +467,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -475,7 +475,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-default ant-btn-dashed"
+      class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed"
       type="button"
     >
       <span>
@@ -483,7 +483,7 @@ exports[`renders components/flex/demo/gap.tsx extend context correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-link"
+      class="ant-btn ant-btn-link ant-btn-color-primary ant-btn-variant-link"
       type="button"
     >
       <span>
@@ -501,7 +501,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
   class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
 >
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -509,7 +509,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -517,7 +517,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -525,7 +525,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -533,7 +533,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -541,7 +541,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -549,7 +549,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -557,7 +557,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -565,7 +565,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -573,7 +573,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -581,7 +581,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -589,7 +589,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -597,7 +597,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -605,7 +605,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -613,7 +613,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -621,7 +621,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -629,7 +629,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -637,7 +637,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -645,7 +645,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -653,7 +653,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -661,7 +661,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -669,7 +669,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -677,7 +677,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -685,7 +685,7 @@ exports[`renders components/flex/demo/wrap.tsx extend context correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>

components/flex/__tests__/__snapshots__/demo.test.ts.snap

@@ -181,7 +181,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
     style="width:100%;height:120px;border-radius:6px;border:1px solid #40a9ff"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -189,7 +189,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -197,7 +197,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -205,7 +205,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -309,7 +309,7 @@ exports[`renders components/flex/demo/combination.tsx correctly 1`] = `
           “antd is an enterprise-class UI design language and React UI library.”
         </h3>
         <a
-          class="ant-btn ant-btn-primary ant-btn-solid"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
           href="https://ant.design"
           tabindex="0"
           target="_blank"
@@ -451,7 +451,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
     class="ant-flex ant-flex-gap-small"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -459,7 +459,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -467,7 +467,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-default ant-btn-dashed"
+      class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed"
       type="button"
     >
       <span>
@@ -475,7 +475,7 @@ exports[`renders components/flex/demo/gap.tsx correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-primary ant-btn-link"
+      class="ant-btn ant-btn-link ant-btn-color-primary ant-btn-variant-link"
       type="button"
     >
       <span>
@@ -491,7 +491,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
   class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
 >
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -499,7 +499,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -507,7 +507,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -515,7 +515,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -523,7 +523,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -531,7 +531,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -539,7 +539,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -547,7 +547,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -555,7 +555,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -563,7 +563,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -571,7 +571,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -579,7 +579,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -587,7 +587,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -595,7 +595,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -603,7 +603,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -611,7 +611,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -619,7 +619,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -627,7 +627,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -635,7 +635,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -643,7 +643,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -651,7 +651,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -659,7 +659,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -667,7 +667,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -675,7 +675,7 @@ exports[`renders components/flex/demo/wrap.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>

components/float-button/FloatButtonGroup.tsx

@@ -3,7 +3,7 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
 import { useZIndex } from '../_util/hooks/useZIndex';

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -554,7 +554,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
             type="submit"
           >
             <span>
@@ -566,7 +566,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
             type="button"
           >
             <span>
@@ -785,7 +785,7 @@ exports[`renders components/form/demo/basic.tsx extend context correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -1186,7 +1186,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="submit"
               >
                 <span>
@@ -1327,7 +1327,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="submit"
               >
                 <span>
@@ -1898,7 +1898,7 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="submit"
                 >
                   <span>
@@ -1910,7 +1910,7 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>
@@ -1922,7 +1922,7 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-link"
+                  class="ant-btn ant-btn-link ant-btn-color-primary ant-btn-variant-link"
                   type="button"
                 >
                   <span>
@@ -2095,7 +2095,7 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx extend context c
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               type="submit"
             >
               <span>
@@ -2315,7 +2315,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -5157,7 +5157,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <button
-                class="ant-btn ant-btn-default ant-btn-outlined"
+                class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                 disabled=""
                 type="button"
               >
@@ -6697,7 +6697,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx extend context corre
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-dashed"
+              class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed"
               style="width: 60%;"
               type="button"
             >
@@ -6732,7 +6732,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx extend context corre
               </span>
             </button>
             <button
-              class="ant-btn ant-btn-default ant-btn-dashed"
+              class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed"
               style="width: 60%; margin-top: 20px;"
               type="button"
             >
@@ -6787,7 +6787,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx extend context corre
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -6827,7 +6827,7 @@ exports[`renders components/form/demo/dynamic-form-items.tsx extend context corr
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
+              class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-btn-block"
               type="button"
             >
               <span
@@ -6881,7 +6881,7 @@ exports[`renders components/form/demo/dynamic-form-items.tsx extend context corr
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -7018,7 +7018,7 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx extend cont
                     style="display: flex; flex-direction: column; row-gap: 16px;"
                   >
                     <button
-                      class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
+                      class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-btn-block"
                       type="button"
                     >
                       <span>
@@ -7034,7 +7034,7 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx extend cont
       </div>
     </div>
     <button
-      class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
+      class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-btn-block"
       type="button"
     >
       <span>
@@ -7106,7 +7106,7 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx extend con
                       class="ant-form-item-control-input-content"
                     >
                       <button
-                        class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
+                        class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-btn-block"
                         type="button"
                       >
                         <span
@@ -7165,7 +7165,7 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx extend con
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -7319,7 +7319,7 @@ exports[`renders components/form/demo/dynamic-rule.tsx extend context correctly
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="button"
             >
               <span>
@@ -7451,7 +7451,7 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -7459,7 +7459,7 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
               </span>
             </button>
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               style="margin: 0px 8px;"
               type="button"
             >
@@ -7616,7 +7616,7 @@ exports[`renders components/form/demo/form-dependencies.tsx extend context corre
 exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -7746,7 +7746,7 @@ exports[`renders components/form/demo/form-item-path.tsx extend context correctl
     </div>
   </div>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="submit"
   >
     <span>
@@ -8452,7 +8452,7 @@ exports[`renders components/form/demo/getValueProps-normalize.tsx extend context
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -8665,7 +8665,7 @@ exports[`renders components/form/demo/inline-login.tsx extend context correctly
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               disabled=""
               type="submit"
             >
@@ -8994,7 +8994,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="button"
             >
               <span>
@@ -9124,7 +9124,7 @@ exports[`renders components/form/demo/layout-can-wrap.tsx extend context correct
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -9492,7 +9492,7 @@ exports[`renders components/form/demo/login.tsx extend context correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid ant-btn-block"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-block"
               type="submit"
             >
               <span>
@@ -9789,7 +9789,7 @@ exports[`renders components/form/demo/nest-messages.tsx extend context correctly
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -9875,7 +9875,7 @@ exports[`renders components/form/demo/ref-item.tsx extend context correctly 1`]
     </div>
   </div>
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -9883,7 +9883,7 @@ exports[`renders components/form/demo/ref-item.tsx extend context correctly 1`]
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -11175,7 +11175,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
                 style="padding-left: 4px; padding-right: 4px;"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>
@@ -11254,7 +11254,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -11572,7 +11572,7 @@ exports[`renders components/form/demo/required-mark.tsx extend context correctly
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="button"
             >
               <span>
@@ -13008,7 +13008,7 @@ exports[`renders components/form/demo/size.tsx extend context correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               type="button"
             >
               <span>
@@ -15791,7 +15791,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
                           class="ant-picker-ok"
                         >
                           <button
-                            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                             disabled=""
                             type="button"
                           >
@@ -19469,7 +19469,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
                             class="ant-picker-ok"
                           >
                             <button
-                              class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                               disabled=""
                               type="button"
                             >
@@ -21060,7 +21060,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
                           class="ant-picker-ok"
                         >
                           <button
-                            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                             disabled=""
                             type="button"
                           >
@@ -21096,7 +21096,7 @@ exports[`renders components/form/demo/time-related-controls.tsx extend context c
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -21381,7 +21381,7 @@ exports[`renders components/form/demo/validate-only.tsx extend context correctly
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   disabled=""
                   type="submit"
                 >
@@ -21394,7 +21394,7 @@ exports[`renders components/form/demo/validate-only.tsx extend context correctly
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="reset"
                 >
                   <span>
@@ -22005,6 +22005,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
           >
             <div
               class="ant-slider ant-slider-horizontal ant-slider-with-marks"
+              id="validate_other_slider"
             >
               <div
                 class="ant-slider-rail"
@@ -22863,7 +22864,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                     type="file"
                   />
                   <button
-                    class="ant-btn ant-btn-default ant-btn-outlined"
+                    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                     type="button"
                   >
                     <span
@@ -23431,7 +23432,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="submit"
                 >
                   <span>
@@ -23443,7 +23444,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="reset"
                 >
                   <span>
@@ -23483,7 +23484,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx extend contex
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               type="button"
             >
               <span>
@@ -23810,7 +23811,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx extend contex
               class="ant-flex ant-flex-gap-small"
             >
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="submit"
               >
                 <span>
@@ -23818,7 +23819,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx extend contex
                 </span>
               </button>
               <button
-                class="ant-btn ant-btn-dangerous ant-btn-outlined"
+                class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined"
                 type="button"
               >
                 <span>
@@ -26539,7 +26540,7 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
                           class="ant-picker-ok"
                         >
                           <button
-                            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                             disabled=""
                             type="button"
                           >
@@ -33400,7 +33401,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -33483,7 +33484,7 @@ exports[`renders components/form/demo/warning-only.tsx extend context correctly
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="submit"
                 >
                   <span>
@@ -33495,7 +33496,7 @@ exports[`renders components/form/demo/warning-only.tsx extend context correctly
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -394,7 +394,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
             type="submit"
           >
             <span>
@@ -406,7 +406,7 @@ Array [
           class="ant-space-item"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
             type="button"
           >
             <span>
@@ -623,7 +623,7 @@ exports[`renders components/form/demo/basic.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -917,7 +917,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="submit"
               >
                 <span>
@@ -1058,7 +1058,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="submit"
               >
                 <span>
@@ -1425,7 +1425,7 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="submit"
                 >
                   <span>
@@ -1437,7 +1437,7 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>
@@ -1449,7 +1449,7 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-link"
+                  class="ant-btn ant-btn-link ant-btn-color-primary ant-btn-variant-link"
                   type="button"
                 >
                   <span>
@@ -1578,7 +1578,7 @@ exports[`renders components/form/demo/custom-feedback-icons.tsx correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               type="submit"
             >
               <span>
@@ -1715,7 +1715,7 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -2662,7 +2662,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <button
-                class="ant-btn ant-btn-default ant-btn-outlined"
+                class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                 disabled=""
                 type="button"
               >
@@ -3628,7 +3628,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-dashed"
+              class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed"
               style="width:60%"
               type="button"
             >
@@ -3663,7 +3663,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx correctly 1`] = `
               </span>
             </button>
             <button
-              class="ant-btn ant-btn-default ant-btn-dashed"
+              class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed"
               style="width:60%;margin-top:20px"
               type="button"
             >
@@ -3718,7 +3718,7 @@ exports[`renders components/form/demo/dynamic-form-item.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -3756,7 +3756,7 @@ exports[`renders components/form/demo/dynamic-form-items.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
+              class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-btn-block"
               type="button"
             >
               <span
@@ -3810,7 +3810,7 @@ exports[`renders components/form/demo/dynamic-form-items.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -3945,7 +3945,7 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx correctly 1
                     style="display:flex;flex-direction:column;row-gap:16px"
                   >
                     <button
-                      class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
+                      class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-btn-block"
                       type="button"
                     >
                       <span>
@@ -3961,7 +3961,7 @@ exports[`renders components/form/demo/dynamic-form-items-complex.tsx correctly 1
       </div>
     </div>
     <button
-      class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
+      class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-btn-block"
       type="button"
     >
       <span>
@@ -4027,7 +4027,7 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx correctly
                       class="ant-form-item-control-input-content"
                     >
                       <button
-                        class="ant-btn ant-btn-default ant-btn-dashed ant-btn-block"
+                        class="ant-btn ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-btn-block"
                         type="button"
                       >
                         <span
@@ -4086,7 +4086,7 @@ exports[`renders components/form/demo/dynamic-form-items-no-style.tsx correctly
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -4238,7 +4238,7 @@ exports[`renders components/form/demo/dynamic-rule.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="button"
             >
               <span>
@@ -4368,7 +4368,7 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -4376,7 +4376,7 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
               </span>
             </button>
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               style="margin:0 8px"
               type="button"
             >
@@ -4529,7 +4529,7 @@ exports[`renders components/form/demo/form-dependencies.tsx correctly 1`] = `
 exports[`renders components/form/demo/form-in-modal.tsx correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -4657,7 +4657,7 @@ exports[`renders components/form/demo/form-item-path.tsx correctly 1`] = `
     </div>
   </div>
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="submit"
   >
     <span>
@@ -4786,7 +4786,7 @@ exports[`renders components/form/demo/getValueProps-normalize.tsx correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -4997,7 +4997,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               disabled=""
               type="submit"
             >
@@ -5322,7 +5322,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="button"
             >
               <span>
@@ -5450,7 +5450,7 @@ exports[`renders components/form/demo/layout-can-wrap.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -5814,7 +5814,7 @@ exports[`renders components/form/demo/login.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid ant-btn-block"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-block"
               type="submit"
             >
               <span>
@@ -6109,7 +6109,7 @@ exports[`renders components/form/demo/nest-messages.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -6193,7 +6193,7 @@ exports[`renders components/form/demo/ref-item.tsx correctly 1`] = `
     </div>
   </div>
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -6201,7 +6201,7 @@ exports[`renders components/form/demo/ref-item.tsx correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -7115,7 +7115,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
                 style="padding-left:4px;padding-right:4px"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>
@@ -7194,7 +7194,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -7472,7 +7472,7 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="button"
             >
               <span>
@@ -8126,7 +8126,7 @@ exports[`renders components/form/demo/size.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               type="button"
             >
               <span>
@@ -8684,7 +8684,7 @@ exports[`renders components/form/demo/time-related-controls.tsx correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -8965,7 +8965,7 @@ exports[`renders components/form/demo/validate-only.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   disabled=""
                   type="submit"
                 >
@@ -8978,7 +8978,7 @@ exports[`renders components/form/demo/validate-only.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="reset"
                 >
                   <span>
@@ -9428,6 +9428,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
           >
             <div
               class="ant-slider ant-slider-horizontal ant-slider-with-marks"
+              id="validate_other_slider"
             >
               <div
                 class="ant-slider-rail"
@@ -10267,7 +10268,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                     type="file"
                   />
                   <button
-                    class="ant-btn ant-btn-default ant-btn-outlined"
+                    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                     type="button"
                   >
                     <span
@@ -10467,7 +10468,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="submit"
                 >
                   <span>
@@ -10479,7 +10480,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="reset"
                 >
                   <span>
@@ -10517,7 +10518,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               type="button"
             >
               <span>
@@ -10747,7 +10748,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`]
               class="ant-flex ant-flex-gap-small"
             >
               <button
-                class="ant-btn ant-btn-primary ant-btn-solid"
+                class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                 type="submit"
               >
                 <span>
@@ -10755,7 +10756,7 @@ exports[`renders components/form/demo/validate-scroll-to-field.tsx correctly 1`]
                 </span>
               </button>
               <button
-                class="ant-btn ant-btn-dangerous ant-btn-outlined"
+                class="ant-btn ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined"
                 type="button"
               >
                 <span>
@@ -13735,7 +13736,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-primary ant-btn-solid"
+              class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
               type="submit"
             >
               <span>
@@ -13816,7 +13817,7 @@ exports[`renders components/form/demo/warning-only.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="submit"
                 >
                   <span>
@@ -13828,7 +13829,7 @@ exports[`renders components/form/demo/warning-only.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>

components/form/__tests__/__snapshots__/index.test.tsx.snap

@@ -979,7 +979,7 @@ exports[`Form form should support disabled 1`] = `
             class="ant-form-item-control-input-content"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
               disabled=""
               type="button"
             >

components/image/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -209,7 +209,7 @@ Array [
   </div>,
   <br />,
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -351,7 +351,7 @@ exports[`renders components/image/demo/imageRender.tsx extend context correctly
 
 exports[`renders components/image/demo/nested.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -428,7 +428,7 @@ exports[`renders components/image/demo/placeholder.tsx extend context correctly
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>

components/image/__tests__/__snapshots__/demo.test.ts.snap

@@ -206,7 +206,7 @@ Array [
   </div>,
   <br />,
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -342,7 +342,7 @@ exports[`renders components/image/demo/imageRender.tsx correctly 1`] = `
 
 exports[`renders components/image/demo/nested.tsx correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -417,7 +417,7 @@ exports[`renders components/image/demo/placeholder.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>

components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1501,7 +1501,7 @@ Array [
     style="margin-top: 20px;"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -3190,7 +3190,7 @@ exports[`renders components/input-number/demo/out-of-range.tsx extend context co
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>

components/input-number/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1219,7 +1219,7 @@ Array [
     style="margin-top:20px"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -2900,7 +2900,7 @@ exports[`renders components/input-number/demo/out-of-range.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>

components/input/OTP/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 
 import { getMergedStatus } from '../../_util/statusUtils';

components/input/__tests__/__snapshots__/Search.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`Input.Search rtl render component should be rendered correctly in RTL d
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-rtl ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-rtl ant-input-search-button"
         type="button"
       >
         <span
@@ -75,7 +75,7 @@ exports[`Input.Search should support ReactNode suffix without error 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
         type="button"
       >
         <span
@@ -123,7 +123,7 @@ exports[`Input.Search should support addonAfter 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
         type="button"
       >
         <span
@@ -174,7 +174,7 @@ exports[`Input.Search should support addonAfter 2`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-input-search-button"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-input-search-button"
         type="button"
       >
         <span
@@ -234,7 +234,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
         type="button"
       >
         <span
@@ -292,7 +292,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-loading ant-input-search-button"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-input-search-button"
         type="button"
       >
         <span
@@ -341,7 +341,7 @@ exports[`Input.Search should support custom Button 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-input-search-button"
         type="button"
       >
         <span>
@@ -394,7 +394,7 @@ exports[`Input.Search should support invalid addonAfter 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-input-search-button"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-input-search-button"
         type="button"
       >
         <span
@@ -449,7 +449,7 @@ exports[`Input.Search should support invalid suffix 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
         type="button"
       >
         <span
@@ -497,7 +497,7 @@ exports[`Input.Search should support loading 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
         type="button"
       >
         <span
@@ -545,7 +545,7 @@ exports[`Input.Search should support loading 2`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-loading ant-input-search-button"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-input-search-button"
         type="button"
       >
         <span

components/input/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -704,7 +704,7 @@ Array [
     style="width: 100px;"
   />,
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -721,12 +721,10 @@ Array [
     class="ant-typography"
   >
     Ant Design
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-flex;"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -747,7 +745,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
     <div
       class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
       style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@@ -3043,7 +3041,7 @@ Array [
                 class="ant-picker-ok"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid ant-btn-sm"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
                   disabled=""
                   type="button"
                 >
@@ -5805,7 +5803,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
               type="button"
             >
               <span
@@ -5850,7 +5848,7 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
         value="Combine input and button"
       />
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-compact-item ant-btn-compact-last-item"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
         type="button"
       >
         <span>
@@ -6095,7 +6093,7 @@ exports[`renders components/input/demo/debug-addon.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
             type="button"
           >
             <span>
@@ -6124,7 +6122,7 @@ exports[`renders components/input/demo/debug-addon.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
             type="button"
           >
             <span>
@@ -6168,7 +6166,7 @@ exports[`renders components/input/demo/debug-addon.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
             type="button"
           >
             <span
@@ -6591,7 +6589,7 @@ exports[`renders components/input/demo/focus.tsx extend context correctly 1`] =
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>
@@ -6603,7 +6601,7 @@ exports[`renders components/input/demo/focus.tsx extend context correctly 1`] =
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>
@@ -6615,7 +6613,7 @@ exports[`renders components/input/demo/focus.tsx extend context correctly 1`] =
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>
@@ -6627,7 +6625,7 @@ exports[`renders components/input/demo/focus.tsx extend context correctly 1`] =
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>
@@ -6746,7 +6744,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
       value="https://ant.design"
     />
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -6765,7 +6763,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
       value="git@github.com:ant-design/ant-design.git"
     />
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
       type="button"
     >
       <span
@@ -7017,7 +7015,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -7097,7 +7095,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -10590,7 +10588,7 @@ exports[`renders components/input/demo/password-input.tsx extend context correct
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           style="width: 80px;"
           type="button"
         >
@@ -10802,7 +10800,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -10887,7 +10885,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -10977,7 +10975,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -11027,7 +11025,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-input-search-button"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-input-search-button"
             type="button"
           >
             <span
@@ -11111,7 +11109,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-input-search-button"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-input-search-button"
             type="button"
           >
             <span>
@@ -11169,7 +11167,7 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-input-search-button"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-input-search-button"
             type="button"
           >
             <span>
@@ -11203,7 +11201,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
           type="button"
         >
           <span
@@ -11251,7 +11249,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid ant-btn-loading ant-input-search-button"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-input-search-button"
           type="button"
         >
           <span
@@ -11299,7 +11297,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-btn-loading ant-input-search-button"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-btn-loading ant-input-search-button"
           type="button"
         >
           <span
@@ -11649,7 +11647,7 @@ exports[`renders components/input/demo/textarea.tsx extend context correctly 2`]
 exports[`renders components/input/demo/textarea-resize.tsx extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     style="margin-bottom: 16px;"
     type="button"
   >

components/input/__tests__/__snapshots__/demo.test.tsx.snap

@@ -428,7 +428,7 @@ Array [
     style="width:100px"
   />,
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     type="button"
   >
     <span>
@@ -445,12 +445,10 @@ Array [
     class="ant-typography"
   >
     Ant Design
-    <div
+    <button
       aria-label="Copy"
       class="ant-typography-copy"
-      role="button"
-      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-flex"
-      tabindex="0"
+      type="button"
     >
       <span
         aria-label="copy"
@@ -471,7 +469,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </button>
   </span>,
   <span
     class="ant-input-affix-wrapper ant-input-outlined"
@@ -1687,7 +1685,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+              class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
               type="button"
             >
               <span
@@ -1732,7 +1730,7 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
         value="Combine input and button"
       />
       <button
-        class="ant-btn ant-btn-primary ant-btn-solid ant-btn-compact-item ant-btn-compact-last-item"
+        class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
         type="button"
       >
         <span>
@@ -1894,7 +1892,7 @@ exports[`renders components/input/demo/debug-addon.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
             type="button"
           >
             <span>
@@ -1923,7 +1921,7 @@ exports[`renders components/input/demo/debug-addon.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
             type="button"
           >
             <span>
@@ -1967,7 +1965,7 @@ exports[`renders components/input/demo/debug-addon.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
             type="button"
           >
             <span
@@ -2386,7 +2384,7 @@ exports[`renders components/input/demo/focus.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>
@@ -2398,7 +2396,7 @@ exports[`renders components/input/demo/focus.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>
@@ -2410,7 +2408,7 @@ exports[`renders components/input/demo/focus.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>
@@ -2422,7 +2420,7 @@ exports[`renders components/input/demo/focus.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span>
@@ -2539,7 +2537,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
       value="https://ant.design"
     />
     <button
-      class="ant-btn ant-btn-primary ant-btn-solid"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
       type="button"
     >
       <span>
@@ -2558,7 +2556,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
       value="git@github.com:ant-design/ant-design.git"
     />
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only"
       type="button"
     >
       <span
@@ -2710,7 +2708,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -2790,7 +2788,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -3936,7 +3934,7 @@ exports[`renders components/input/demo/password-input.tsx correctly 1`] = `
         class="ant-space-item"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           style="width:80px"
           type="button"
         >
@@ -4125,7 +4123,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -4210,7 +4208,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -4300,7 +4298,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -4350,7 +4348,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-input-search-button"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-input-search-button"
             type="button"
           >
             <span
@@ -4434,7 +4432,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-input-search-button"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-input-search-button"
             type="button"
           >
             <span>
@@ -4492,7 +4490,7 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-input-search-button"
+            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-input-search-button"
             type="button"
           >
             <span>
@@ -4524,7 +4522,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-default ant-btn-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
+          class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-icon-only ant-btn-loading ant-input-search-button"
           type="button"
         >
           <span
@@ -4572,7 +4570,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid ant-btn-loading ant-input-search-button"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-loading ant-input-search-button"
           type="button"
         >
           <span
@@ -4620,7 +4618,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-primary ant-btn-solid ant-btn-lg ant-btn-loading ant-input-search-button"
+          class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-btn-loading ant-input-search-button"
           type="button"
         >
           <span
@@ -4959,7 +4957,7 @@ Array [
 exports[`renders components/input/demo/textarea-resize.tsx correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-default ant-btn-outlined"
+    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     style="margin-bottom:16px"
     type="button"
   >

components/input/style/index.ts

@@ -659,6 +659,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       },
 
       [`${componentCls}-affix-wrapper`]: {
+        height: token.controlHeight,
         borderRadius: 0,
       },
 
@@ -713,12 +714,16 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
         },
       },
 
-      [`&-large ${searchPrefixCls}-button`]: {
-        height: token.controlHeightLG,
+      '&-large': {
+        [`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: {
+          height: token.controlHeightLG,
+        },
       },
 
-      [`&-small ${searchPrefixCls}-button`]: {
-        height: token.controlHeightSM,
+      '&-small': {
+        [`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: {
+          height: token.controlHeightSM,
+        },
       },
 
       '&-rtl': {

components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1087,7 +1087,7 @@ exports[`renders components/layout/demo/custom-trigger.tsx extend context correc
       style="padding: 0px; background: rgb(255, 255, 255);"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-text ant-btn-icon-only"
+        class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
         style="font-size: 16px; width: 64px; height: 64px;"
         type="button"
       >

components/layout/__tests__/__snapshots__/demo.test.ts.snap

@@ -550,7 +550,7 @@ exports[`renders components/layout/demo/custom-trigger.tsx correctly 1`] = `
       style="padding:0;background:#ffffff"
     >
       <button
-        class="ant-btn ant-btn-default ant-btn-text ant-btn-icon-only"
+        class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
         style="font-size:16px;width:64px;height:64px"
         type="button"
       >

components/locale/tr_TR.ts

@@ -21,6 +21,7 @@ const localeValues: Locale = {
     filterConfirm: 'Tamam',
     filterReset: 'Sıfırla',
     filterEmptyText: 'Filtre yok',
+    filterCheckall: 'Tümünü seç',
     selectAll: 'Tüm sayfayı seç',
     selectInvert: 'Tersini seç',
     selectionAll: 'Tümünü seç',

components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -364,7 +364,7 @@ exports[`renders components/mentions/demo/form.tsx extend context correctly 1`]
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="submit"
                 >
                   <span>
@@ -376,7 +376,7 @@ exports[`renders components/mentions/demo/form.tsx extend context correctly 1`]
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>

components/mentions/__tests__/__snapshots__/demo.test.tsx.snap

@@ -306,7 +306,7 @@ exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-primary ant-btn-solid"
+                  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                   type="submit"
                 >
                   <span>
@@ -318,7 +318,7 @@ exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
                 class="ant-space-item"
               >
                 <button
-                  class="ant-btn ant-btn-default ant-btn-outlined"
+                  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                   type="button"
                 >
                   <span>

components/menu/OverrideContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { supportNodeRef, useComposeRef } from 'rc-util';
+import { supportNodeRef, useComposeRef } from 'rc-util/lib/ref';
 
 import ContextIsolator from '../_util/ContextIsolator';
 import type { MenuProps } from './menu';

components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3045,7 +3045,7 @@ exports[`renders components/menu/demo/inline-collapsed.tsx extend context correc
   style="width: 256px;"
 >
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     style="margin-bottom: 16px;"
     type="button"
   >

components/menu/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1406,7 +1406,7 @@ exports[`renders components/menu/demo/inline-collapsed.tsx correctly 1`] = `
   style="width:256px"
 >
   <button
-    class="ant-btn ant-btn-primary ant-btn-solid"
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
     style="margin-bottom:16px"
     type="button"
   >

components/menu/menu.tsx

@@ -4,7 +4,7 @@ import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
 import classNames from 'classnames';
 import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu';
 import RcMenu from 'rc-menu';
-import { useEvent } from 'rc-util';
+import useEvent from 'rc-util/lib/hooks/useEvent';
 import omit from 'rc-util/lib/omit';
 
 import initCollapseMotion from '../_util/motion';

components/message/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -79,7 +79,7 @@ exports[`renders components/message/demo/component-token.tsx extend context corr
 
 exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -92,7 +92,7 @@ exports[`renders components/message/demo/custom-style.tsx extend context correct
 
 exports[`renders components/message/demo/duration.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -105,7 +105,7 @@ exports[`renders components/message/demo/duration.tsx extend context correctly 2
 
 exports[`renders components/message/demo/hooks.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span>
@@ -118,7 +118,7 @@ exports[`renders components/message/demo/hooks.tsx extend context correctly 2`]
 
 exports[`renders components/message/demo/info.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span>
@@ -131,7 +131,7 @@ exports[`renders components/message/demo/info.tsx extend context correctly 2`] =
 
 exports[`renders components/message/demo/loading.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -150,7 +150,7 @@ exports[`renders components/message/demo/other.tsx extend context correctly 1`]
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -162,7 +162,7 @@ exports[`renders components/message/demo/other.tsx extend context correctly 1`]
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -174,7 +174,7 @@ exports[`renders components/message/demo/other.tsx extend context correctly 1`]
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-outlined"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -229,7 +229,7 @@ exports[`renders components/message/demo/render-panel.tsx extend context correct
 
 exports[`renders components/message/demo/thenable.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-default ant-btn-outlined"
+  class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
   type="button"
 >
   <span>
@@ -242,7 +242,7 @@ exports[`renders components/message/demo/thenable.tsx extend context correctly 2
 
 exports[`renders components/message/demo/update.tsx extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-primary ant-btn-solid"
+  class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
   type="button"
 >
   <span>