chore: auto merge branches (#51093)

chore: merge master into feature

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SoundOutlined } from '@ant-design/icons';
+
+const Audio: React.FC<React.PropsWithChildren<{ domId: string }>> = ({ domId, children }) => {
+  return (
+    <a onClick={() => document.querySelector<HTMLAudioElement>(`#${domId}`)?.play()}>
+      {children}
+      <SoundOutlined style={{ fontSize: 20, color: 'black' }} />
+    </a>
+  );
+};
+
+export default Audio;

.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 {
@@ -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/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 } 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,23 @@ const useStyle = createStyles(({ token, css }) => ({
       scrollbarColor: 'unset',
     },
   },
+  versionWrap: css`
+    margin-bottom: 1em;
+  `,
+  versionTitle: css`
+    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 +113,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,25 +152,46 @@ const ParseChangelog: React.FC<{ changelog: string; refs: string[]; styles: any
     return nodes;
   }, [changelog]);
 
-  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]}
-        </a>
-      ))}
-    </>
-  );
+  return <span>{parsedChangelog}</span>;
 };
 
-interface ChangelogInfo {
-  version: string;
-  changelog: string;
-  refs: string[];
-}
+const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ changelogList }) => {
+  const elements: React.ReactNode[] = [];
+  const { styles } = useStyle();
+  const len = changelogList.length;
+  for (let i = 0; i < len; 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 < len && changelogList[i + 1].changelog.trim().startsWith('<img')) {
+      const imgDom = new DOMParser().parseFromString(changelogList[i + 1].changelog, 'text/html');
+      const imgElement = imgDom.querySelector<HTMLImageElement>('img');
+      elements.push(
+        <li key={i}>
+          <ParseChangelog changelog={changelog} />
+          {refs?.map<React.ReactNode>((ref) => (
+            <a className={styles.linkRef} key={ref} href={ref} target="_blank" rel="noreferrer">
+              #{ref.match(/^.*\/(\d+)$/)?.[1]}
+            </a>
+          ))}
+          <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} />
+        </li>,
+      );
+    }
+  }
+  return <ul className={styles.listWrap}>{elements}</ul>;
+};
 
 const useChangelog = (componentPath: string, lang: 'cn' | 'en'): ChangelogInfo[] => {
   const logFileName = `components-changelog-${lang}.json`;
@@ -156,10 +209,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 +235,41 @@ 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">
+              <Typography.Title className={styles.versionTitle} 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>
+              <Tag className={styles.versionTag} bordered={false} color="blue">
+                {changelogList[0]?.releaseDate}
+              </Tag>
+            </Flex>
+            <RenderChangelogList changelogList={changelogList} />
           </Typography>
         ),
       };
@@ -226,15 +279,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/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/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:

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

@@ -16,6 +16,29 @@ tag: vVERSION
 
 ---
 
+## 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,29 @@ tag: vVERSION
 
 ---
 
+## 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`

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/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/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/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/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/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>
@@ -22863,7 +22863,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 +23431,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 +23443,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 +23483,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 +23810,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 +23818,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 +26539,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 +33400,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 +33483,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 +33495,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>
@@ -10267,7 +10267,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 +10467,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 +10479,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 +10517,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 +10747,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 +10755,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 +13735,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 +13816,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 +13828,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/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>

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

@@ -77,7 +77,7 @@ Array [
 
 exports[`renders components/message/demo/custom-style.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>
@@ -88,7 +88,7 @@ exports[`renders components/message/demo/custom-style.tsx correctly 1`] = `
 
 exports[`renders components/message/demo/duration.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>
@@ -99,7 +99,7 @@ exports[`renders components/message/demo/duration.tsx correctly 1`] = `
 
 exports[`renders components/message/demo/hooks.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>
@@ -110,7 +110,7 @@ exports[`renders components/message/demo/hooks.tsx correctly 1`] = `
 
 exports[`renders components/message/demo/info.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>
@@ -121,7 +121,7 @@ exports[`renders components/message/demo/info.tsx correctly 1`] = `
 
 exports[`renders components/message/demo/loading.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>
@@ -138,7 +138,7 @@ exports[`renders components/message/demo/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="button"
     >
       <span>
@@ -150,7 +150,7 @@ exports[`renders components/message/demo/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="button"
     >
       <span>
@@ -162,7 +162,7 @@ exports[`renders components/message/demo/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="button"
     >
       <span>
@@ -213,7 +213,7 @@ exports[`renders components/message/demo/render-panel.tsx correctly 1`] = `
 
 exports[`renders components/message/demo/thenable.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>
@@ -224,7 +224,7 @@ exports[`renders components/message/demo/thenable.tsx correctly 1`] = `
 
 exports[`renders components/message/demo/update.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>

components/modal/__tests__/__snapshots__/Modal.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Modal Both ways should be rendered normally on the page 1`] = `
   class="first-origin"
 >
   <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>
@@ -13,7 +13,7 @@ exports[`Modal Both ways should be rendered normally on the page 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>
@@ -28,7 +28,7 @@ exports[`Modal Both ways should be rendered normally on the page 2`] = `
   class="second-props-origin"
 >
   <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[`Modal Both ways should be rendered normally on the page 2`] = `
     </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>
@@ -111,7 +111,7 @@ exports[`Modal render correctly 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>
@@ -119,7 +119,7 @@ exports[`Modal render 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>
@@ -260,7 +260,7 @@ exports[`Modal support closeIcon 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>
@@ -268,7 +268,7 @@ exports[`Modal support closeIcon 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/modal/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`renders components/modal/demo/async.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>
@@ -15,7 +15,7 @@ exports[`renders components/modal/demo/async.tsx extend context correctly 2`] =
 
 exports[`renders components/modal/demo/basic.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>
@@ -28,7 +28,7 @@ exports[`renders components/modal/demo/basic.tsx extend context correctly 2`] =
 
 exports[`renders components/modal/demo/button-props.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>
@@ -47,7 +47,7 @@ exports[`renders components/modal/demo/classNames.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>
@@ -59,7 +59,7 @@ exports[`renders components/modal/demo/classNames.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>
@@ -137,7 +137,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
           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>
@@ -145,7 +145,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
             </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>
@@ -221,7 +221,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
           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>
@@ -229,7 +229,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
             </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>
@@ -299,7 +299,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -376,7 +376,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -384,7 +384,7 @@ exports[`renders components/modal/demo/component-token.tsx extend context correc
                 </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>
@@ -415,7 +415,7 @@ exports[`renders components/modal/demo/confirm.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>
@@ -427,7 +427,7 @@ exports[`renders components/modal/demo/confirm.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>
@@ -439,7 +439,7 @@ exports[`renders components/modal/demo/confirm.tsx extend context correctly 1`]
     class="ant-space-item"
   >
     <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>
@@ -451,7 +451,7 @@ exports[`renders components/modal/demo/confirm.tsx extend context correctly 1`]
     class="ant-space-item"
   >
     <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>
@@ -466,7 +466,7 @@ exports[`renders components/modal/demo/confirm.tsx extend context correctly 2`]
 
 exports[`renders components/modal/demo/confirm-router.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>
@@ -479,7 +479,7 @@ exports[`renders components/modal/demo/confirm-router.tsx extend context correct
 
 exports[`renders components/modal/demo/custom-mouse-position.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>
@@ -492,7 +492,7 @@ exports[`renders components/modal/demo/custom-mouse-position.tsx extend context
 
 exports[`renders components/modal/demo/dark.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>
@@ -505,7 +505,7 @@ exports[`renders components/modal/demo/dark.tsx extend context correctly 2`] = `
 
 exports[`renders components/modal/demo/footer.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>
@@ -524,7 +524,7 @@ exports[`renders components/modal/demo/footer-render.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="button"
     >
       <span>
@@ -536,7 +536,7 @@ exports[`renders components/modal/demo/footer-render.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="button"
     >
       <span>
@@ -557,7 +557,7 @@ exports[`renders components/modal/demo/hooks.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>
@@ -569,7 +569,7 @@ exports[`renders components/modal/demo/hooks.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>
@@ -581,7 +581,7 @@ exports[`renders components/modal/demo/hooks.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>
@@ -593,7 +593,7 @@ exports[`renders components/modal/demo/hooks.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>
@@ -608,7 +608,7 @@ exports[`renders components/modal/demo/hooks.tsx extend context correctly 2`] =
 
 exports[`renders components/modal/demo/loading.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>
@@ -627,7 +627,7 @@ exports[`renders components/modal/demo/locale.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>
@@ -639,7 +639,7 @@ exports[`renders components/modal/demo/locale.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>
@@ -654,7 +654,7 @@ exports[`renders components/modal/demo/locale.tsx extend context correctly 2`] =
 
 exports[`renders components/modal/demo/manual.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>
@@ -667,7 +667,7 @@ exports[`renders components/modal/demo/manual.tsx extend context correctly 2`] =
 
 exports[`renders components/modal/demo/modal-render.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>
@@ -715,7 +715,7 @@ exports[`renders components/modal/demo/nested.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>
@@ -740,7 +740,7 @@ exports[`renders components/modal/demo/nested.tsx extend context correctly 2`] =
 exports[`renders components/modal/demo/position.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>
@@ -750,7 +750,7 @@ Array [
   <br />,
   <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>
@@ -827,7 +827,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
           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>
@@ -835,7 +835,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
             </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>
@@ -905,7 +905,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -982,7 +982,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -990,7 +990,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
                 </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>
@@ -1089,7 +1089,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1101,7 +1101,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1121,7 +1121,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1133,7 +1133,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
                   class="ant-space-item"
                 >
                   <button
-                    class="ant-btn ant-btn-dangerous ant-btn-solid"
+                    class="ant-btn ant-btn-primary ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-solid"
                     type="button"
                   >
                     <span>
@@ -1145,7 +1145,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1178,7 +1178,7 @@ exports[`renders components/modal/demo/static-info.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>
@@ -1190,7 +1190,7 @@ exports[`renders components/modal/demo/static-info.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>
@@ -1202,7 +1202,7 @@ exports[`renders components/modal/demo/static-info.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>
@@ -1214,7 +1214,7 @@ exports[`renders components/modal/demo/static-info.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>
@@ -1229,7 +1229,7 @@ exports[`renders components/modal/demo/static-info.tsx extend context correctly
 
 exports[`renders components/modal/demo/width.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>
@@ -1305,7 +1305,7 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 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>
@@ -1313,7 +1313,7 @@ exports[`renders components/modal/demo/wireframe.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>
@@ -1383,7 +1383,7 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -1460,7 +1460,7 @@ exports[`renders components/modal/demo/wireframe.tsx extend context correctly 1`
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -1468,7 +1468,7 @@ exports[`renders components/modal/demo/wireframe.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/modal/__tests__/__snapshots__/demo.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders components/modal/demo/async.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>
@@ -13,7 +13,7 @@ exports[`renders components/modal/demo/async.tsx correctly 1`] = `
 
 exports[`renders components/modal/demo/basic.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>
@@ -24,7 +24,7 @@ exports[`renders components/modal/demo/basic.tsx correctly 1`] = `
 
 exports[`renders components/modal/demo/button-props.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>
@@ -41,7 +41,7 @@ exports[`renders components/modal/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>
@@ -53,7 +53,7 @@ exports[`renders components/modal/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>
@@ -129,7 +129,7 @@ exports[`renders components/modal/demo/component-token.tsx correctly 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>
@@ -137,7 +137,7 @@ exports[`renders components/modal/demo/component-token.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>
@@ -213,7 +213,7 @@ exports[`renders components/modal/demo/component-token.tsx correctly 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>
@@ -221,7 +221,7 @@ exports[`renders components/modal/demo/component-token.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>
@@ -291,7 +291,7 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -368,7 +368,7 @@ exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -376,7 +376,7 @@ exports[`renders components/modal/demo/component-token.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>
@@ -405,7 +405,7 @@ exports[`renders components/modal/demo/confirm.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>
@@ -417,7 +417,7 @@ exports[`renders components/modal/demo/confirm.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>
@@ -429,7 +429,7 @@ exports[`renders components/modal/demo/confirm.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <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>
@@ -441,7 +441,7 @@ exports[`renders components/modal/demo/confirm.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <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>
@@ -454,7 +454,7 @@ exports[`renders components/modal/demo/confirm.tsx correctly 1`] = `
 
 exports[`renders components/modal/demo/confirm-router.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>
@@ -465,7 +465,7 @@ exports[`renders components/modal/demo/confirm-router.tsx correctly 1`] = `
 
 exports[`renders components/modal/demo/custom-mouse-position.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>
@@ -476,7 +476,7 @@ exports[`renders components/modal/demo/custom-mouse-position.tsx correctly 1`] =
 
 exports[`renders components/modal/demo/dark.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>
@@ -487,7 +487,7 @@ exports[`renders components/modal/demo/dark.tsx correctly 1`] = `
 
 exports[`renders components/modal/demo/footer.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>
@@ -504,7 +504,7 @@ exports[`renders components/modal/demo/footer-render.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>
@@ -516,7 +516,7 @@ exports[`renders components/modal/demo/footer-render.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>
@@ -535,7 +535,7 @@ exports[`renders components/modal/demo/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>
@@ -547,7 +547,7 @@ exports[`renders components/modal/demo/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>
@@ -559,7 +559,7 @@ exports[`renders components/modal/demo/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>
@@ -571,7 +571,7 @@ exports[`renders components/modal/demo/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>
@@ -584,7 +584,7 @@ exports[`renders components/modal/demo/hooks.tsx correctly 1`] = `
 
 exports[`renders components/modal/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>
@@ -601,7 +601,7 @@ exports[`renders components/modal/demo/locale.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>
@@ -613,7 +613,7 @@ exports[`renders components/modal/demo/locale.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>
@@ -626,7 +626,7 @@ exports[`renders components/modal/demo/locale.tsx correctly 1`] = `
 
 exports[`renders components/modal/demo/manual.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>
@@ -637,7 +637,7 @@ exports[`renders components/modal/demo/manual.tsx correctly 1`] = `
 
 exports[`renders components/modal/demo/modal-render.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>
@@ -683,7 +683,7 @@ exports[`renders components/modal/demo/nested.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>
@@ -706,7 +706,7 @@ exports[`renders components/modal/demo/nested.tsx correctly 1`] = `
 exports[`renders components/modal/demo/position.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>
@@ -716,7 +716,7 @@ Array [
   <br />,
   <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>
@@ -791,7 +791,7 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 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>
@@ -799,7 +799,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -869,7 +869,7 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -946,7 +946,7 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -954,7 +954,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1053,7 +1053,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1065,7 +1065,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1085,7 +1085,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1097,7 +1097,7 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
                   class="ant-space-item"
                 >
                   <button
-                    class="ant-btn ant-btn-dangerous ant-btn-solid"
+                    class="ant-btn ant-btn-primary ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-solid"
                     type="button"
                   >
                     <span>
@@ -1109,7 +1109,7 @@ exports[`renders components/modal/demo/render-panel.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>
@@ -1140,7 +1140,7 @@ exports[`renders components/modal/demo/static-info.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>
@@ -1152,7 +1152,7 @@ exports[`renders components/modal/demo/static-info.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>
@@ -1164,7 +1164,7 @@ exports[`renders components/modal/demo/static-info.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>
@@ -1176,7 +1176,7 @@ exports[`renders components/modal/demo/static-info.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>
@@ -1189,7 +1189,7 @@ exports[`renders components/modal/demo/static-info.tsx correctly 1`] = `
 
 exports[`renders components/modal/demo/width.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>
@@ -1263,7 +1263,7 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 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>
@@ -1271,7 +1271,7 @@ exports[`renders components/modal/demo/wireframe.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>
@@ -1341,7 +1341,7 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -1418,7 +1418,7 @@ exports[`renders components/modal/demo/wireframe.tsx correctly 1`] = `
               class="ant-modal-confirm-btns"
             >
               <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>
@@ -1426,7 +1426,7 @@ exports[`renders components/modal/demo/wireframe.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/notification/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`renders components/notification/demo/basic.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>
@@ -15,7 +15,7 @@ exports[`renders components/notification/demo/basic.tsx extend context correctly
 
 exports[`renders components/notification/demo/custom-icon.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>
@@ -28,7 +28,7 @@ exports[`renders components/notification/demo/custom-icon.tsx extend context cor
 
 exports[`renders components/notification/demo/custom-style.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>
@@ -41,7 +41,7 @@ exports[`renders components/notification/demo/custom-style.tsx extend context co
 
 exports[`renders components/notification/demo/duration.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>
@@ -61,7 +61,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
@@ -96,7 +96,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
@@ -139,7 +139,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
@@ -174,7 +174,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
@@ -220,7 +220,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
@@ -255,7 +255,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
@@ -298,7 +298,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
@@ -333,7 +333,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
@@ -376,7 +376,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
@@ -411,7 +411,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
@@ -495,7 +495,7 @@ exports[`renders components/notification/demo/render-panel.tsx extend context co
           class="ant-notification-notice-btn"
         >
           <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>
@@ -545,7 +545,7 @@ exports[`renders components/notification/demo/show-with-progress.tsx extend cont
     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>
@@ -557,7 +557,7 @@ exports[`renders components/notification/demo/show-with-progress.tsx extend cont
     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>
@@ -717,7 +717,7 @@ exports[`renders components/notification/demo/stack.tsx extend context correctly
     role="separator"
   />
   <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>
@@ -731,7 +731,7 @@ exports[`renders components/notification/demo/stack.tsx extend context correctly
 
 exports[`renders components/notification/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>
@@ -744,7 +744,7 @@ exports[`renders components/notification/demo/update.tsx extend context correctl
 
 exports[`renders components/notification/demo/with-btn.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>
@@ -763,7 +763,7 @@ exports[`renders components/notification/demo/with-icon.tsx extend context corre
     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>
@@ -775,7 +775,7 @@ exports[`renders components/notification/demo/with-icon.tsx extend context corre
     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>
@@ -787,7 +787,7 @@ exports[`renders components/notification/demo/with-icon.tsx extend context corre
     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>
@@ -799,7 +799,7 @@ exports[`renders components/notification/demo/with-icon.tsx extend context corre
     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/notification/__tests__/__snapshots__/demo.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`renders components/notification/demo/basic.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>
@@ -13,7 +13,7 @@ exports[`renders components/notification/demo/basic.tsx correctly 1`] = `
 
 exports[`renders components/notification/demo/custom-icon.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>
@@ -24,7 +24,7 @@ exports[`renders components/notification/demo/custom-icon.tsx correctly 1`] = `
 
 exports[`renders components/notification/demo/custom-style.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>
@@ -35,7 +35,7 @@ exports[`renders components/notification/demo/custom-style.tsx correctly 1`] = `
 
 exports[`renders components/notification/demo/duration.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>
@@ -53,7 +53,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
@@ -88,7 +88,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
@@ -131,7 +131,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
@@ -166,7 +166,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
@@ -210,7 +210,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
@@ -245,7 +245,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
@@ -288,7 +288,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
@@ -323,7 +323,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
@@ -366,7 +366,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
@@ -401,7 +401,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
@@ -483,7 +483,7 @@ exports[`renders components/notification/demo/render-panel.tsx correctly 1`] = `
           class="ant-notification-notice-btn"
         >
           <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>
@@ -531,7 +531,7 @@ exports[`renders components/notification/demo/show-with-progress.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>
@@ -543,7 +543,7 @@ exports[`renders components/notification/demo/show-with-progress.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>
@@ -701,7 +701,7 @@ exports[`renders components/notification/demo/stack.tsx correctly 1`] = `
     role="separator"
   />
   <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>
@@ -713,7 +713,7 @@ exports[`renders components/notification/demo/stack.tsx correctly 1`] = `
 
 exports[`renders components/notification/demo/update.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>
@@ -724,7 +724,7 @@ exports[`renders components/notification/demo/update.tsx correctly 1`] = `
 
 exports[`renders components/notification/demo/with-btn.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>
@@ -741,7 +741,7 @@ exports[`renders components/notification/demo/with-icon.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>
@@ -753,7 +753,7 @@ exports[`renders components/notification/demo/with-icon.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>
@@ -765,7 +765,7 @@ exports[`renders components/notification/demo/with-icon.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>
@@ -777,7 +777,7 @@ exports[`renders components/notification/demo/with-icon.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/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3,7 +3,7 @@
 exports[`renders components/popconfirm/demo/async.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>
@@ -76,7 +76,7 @@ Array [
               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>
@@ -84,7 +84,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"
                 type="button"
               >
                 <span>
@@ -105,7 +105,7 @@ exports[`renders components/popconfirm/demo/async.tsx extend context correctly 2
 exports[`renders components/popconfirm/demo/basic.tsx extend context correctly 1`] = `
 Array [
   <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>
@@ -178,7 +178,7 @@ Array [
               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>
@@ -186,7 +186,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"
                 type="button"
               >
                 <span>
@@ -207,7 +207,7 @@ exports[`renders components/popconfirm/demo/basic.tsx extend context correctly 2
 exports[`renders components/popconfirm/demo/dynamic-trigger.tsx extend context correctly 1`] = `
 <div>
   <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>
@@ -280,7 +280,7 @@ exports[`renders components/popconfirm/demo/dynamic-trigger.tsx extend context c
               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>
@@ -288,7 +288,7 @@ exports[`renders components/popconfirm/demo/dynamic-trigger.tsx extend context c
                 </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>
@@ -332,7 +332,7 @@ exports[`renders components/popconfirm/demo/dynamic-trigger.tsx extend context c
 exports[`renders components/popconfirm/demo/icon.tsx extend context correctly 1`] = `
 Array [
   <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>
@@ -409,7 +409,7 @@ Array [
               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>
@@ -417,7 +417,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"
                 type="button"
               >
                 <span>
@@ -438,7 +438,7 @@ exports[`renders components/popconfirm/demo/icon.tsx extend context correctly 2`
 exports[`renders components/popconfirm/demo/locale.tsx extend context correctly 1`] = `
 Array [
   <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>
@@ -511,7 +511,7 @@ Array [
               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>
@@ -519,7 +519,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"
                 type="button"
               >
                 <span>
@@ -546,7 +546,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
     style="white-space: nowrap;"
   >
     <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; margin: 4px;"
       type="button"
     >
@@ -620,7 +620,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                 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"
                   style="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -629,7 +629,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   </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="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -644,7 +644,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
       </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"
       style="width: 80px; margin: 4px;"
       type="button"
     >
@@ -718,7 +718,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                 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"
                   style="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -727,7 +727,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   </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="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -742,7 +742,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
       </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"
       style="width: 80px; margin: 4px;"
       type="button"
     >
@@ -816,7 +816,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                 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"
                   style="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -825,7 +825,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   </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="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -848,7 +848,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
       class="ant-flex ant-flex-align-center ant-flex-vertical"
     >
       <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; margin: 4px;"
         type="button"
       >
@@ -922,7 +922,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   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"
                     style="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -931,7 +931,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                     </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="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -946,7 +946,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1020,7 +1020,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   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"
                     style="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1029,7 +1029,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                     </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="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1044,7 +1044,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1118,7 +1118,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   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"
                     style="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1127,7 +1127,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                     </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="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1146,7 +1146,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
       class="ant-flex ant-flex-align-center ant-flex-vertical"
     >
       <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; margin: 4px;"
         type="button"
       >
@@ -1220,7 +1220,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   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"
                     style="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1229,7 +1229,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                     </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="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1244,7 +1244,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1318,7 +1318,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   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"
                     style="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1327,7 +1327,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                     </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="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1342,7 +1342,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1416,7 +1416,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   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"
                     style="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1425,7 +1425,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                     </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="width: 80px; margin: 4px;"
                     type="button"
                   >
@@ -1446,7 +1446,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
     style="white-space: nowrap;"
   >
     <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; margin: 4px;"
       type="button"
     >
@@ -1520,7 +1520,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                 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"
                   style="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -1529,7 +1529,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   </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="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -1544,7 +1544,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
       </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"
       style="width: 80px; margin: 4px;"
       type="button"
     >
@@ -1618,7 +1618,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                 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"
                   style="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -1627,7 +1627,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   </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="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -1642,7 +1642,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
       </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"
       style="width: 80px; margin: 4px;"
       type="button"
     >
@@ -1716,7 +1716,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                 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"
                   style="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -1725,7 +1725,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
                   </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="width: 80px; margin: 4px;"
                   type="button"
                 >
@@ -1748,7 +1748,7 @@ exports[`renders components/popconfirm/demo/placement.tsx extend context correct
 exports[`renders components/popconfirm/demo/promise.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>
@@ -1821,7 +1821,7 @@ Array [
               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>
@@ -1829,7 +1829,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"
                 type="button"
               >
                 <span>
@@ -1913,7 +1913,7 @@ Array [
               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>
@@ -1921,7 +1921,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"
                 type="button"
               >
                 <span>
@@ -2000,7 +2000,7 @@ Array [
               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>
@@ -2008,7 +2008,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"
                 type="button"
               >
                 <span>
@@ -2057,7 +2057,7 @@ Array [
               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>
@@ -2065,7 +2065,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"
                 type="button"
               >
                 <span>
@@ -2119,7 +2119,7 @@ Array [
               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>
@@ -2127,7 +2127,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"
                 type="button"
               >
                 <span>
@@ -2305,7 +2305,7 @@ Array [
               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>
@@ -2313,7 +2313,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"
                 type="button"
               >
                 <span>
@@ -2387,7 +2387,7 @@ Array [
               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>
@@ -2395,7 +2395,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"
                 type="button"
               >
                 <span>

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

@@ -2,7 +2,7 @@
 
 exports[`renders components/popconfirm/demo/async.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>
@@ -13,7 +13,7 @@ exports[`renders components/popconfirm/demo/async.tsx correctly 1`] = `
 
 exports[`renders components/popconfirm/demo/basic.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>
@@ -25,7 +25,7 @@ exports[`renders components/popconfirm/demo/basic.tsx correctly 1`] = `
 exports[`renders components/popconfirm/demo/dynamic-trigger.tsx correctly 1`] = `
 <div>
   <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>
@@ -60,7 +60,7 @@ exports[`renders components/popconfirm/demo/dynamic-trigger.tsx correctly 1`] =
 
 exports[`renders components/popconfirm/demo/icon.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>
@@ -71,7 +71,7 @@ exports[`renders components/popconfirm/demo/icon.tsx correctly 1`] = `
 
 exports[`renders components/popconfirm/demo/locale.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>
@@ -89,7 +89,7 @@ exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
     style="white-space:nowrap"
   >
     <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;margin:4px"
       type="button"
     >
@@ -98,7 +98,7 @@ exports[`renders components/popconfirm/demo/placement.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="width:80px;margin:4px"
       type="button"
     >
@@ -107,7 +107,7 @@ exports[`renders components/popconfirm/demo/placement.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="width:80px;margin:4px"
       type="button"
     >
@@ -124,7 +124,7 @@ exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
       class="ant-flex ant-flex-align-center ant-flex-vertical"
     >
       <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;margin:4px"
         type="button"
       >
@@ -133,7 +133,7 @@ exports[`renders components/popconfirm/demo/placement.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="width:80px;margin:4px"
         type="button"
       >
@@ -142,7 +142,7 @@ exports[`renders components/popconfirm/demo/placement.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="width:80px;margin:4px"
         type="button"
       >
@@ -155,7 +155,7 @@ exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
       class="ant-flex ant-flex-align-center ant-flex-vertical"
     >
       <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;margin:4px"
         type="button"
       >
@@ -164,7 +164,7 @@ exports[`renders components/popconfirm/demo/placement.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="width:80px;margin:4px"
         type="button"
       >
@@ -173,7 +173,7 @@ exports[`renders components/popconfirm/demo/placement.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="width:80px;margin:4px"
         type="button"
       >
@@ -188,7 +188,7 @@ exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
     style="white-space:nowrap"
   >
     <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;margin:4px"
       type="button"
     >
@@ -197,7 +197,7 @@ exports[`renders components/popconfirm/demo/placement.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="width:80px;margin:4px"
       type="button"
     >
@@ -206,7 +206,7 @@ exports[`renders components/popconfirm/demo/placement.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="width:80px;margin:4px"
       type="button"
     >
@@ -220,7 +220,7 @@ exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
 
 exports[`renders components/popconfirm/demo/promise.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>
@@ -295,7 +295,7 @@ Array [
               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>
@@ -303,7 +303,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"
                 type="button"
               >
                 <span>
@@ -382,7 +382,7 @@ Array [
               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>
@@ -390,7 +390,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"
                 type="button"
               >
                 <span>
@@ -439,7 +439,7 @@ Array [
               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>
@@ -447,7 +447,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"
                 type="button"
               >
                 <span>
@@ -501,7 +501,7 @@ Array [
               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>
@@ -509,7 +509,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"
                 type="button"
               >
                 <span>
@@ -683,7 +683,7 @@ Array [
               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>
@@ -691,7 +691,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"
                 type="button"
               >
                 <span>
@@ -765,7 +765,7 @@ Array [
               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>
@@ -773,7 +773,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"
                 type="button"
               >
                 <span>

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

@@ -64,7 +64,7 @@ exports[`Popconfirm should show overlay when trigger is clicked 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>
@@ -72,7 +72,7 @@ exports[`Popconfirm should show overlay when trigger is clicked 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>
@@ -149,7 +149,7 @@ exports[`Popconfirm shows content for render functions 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>
@@ -157,7 +157,7 @@ exports[`Popconfirm shows content for render functions 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>

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

@@ -70,7 +70,7 @@ Array [
       style="white-space: nowrap;"
     >
       <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; margin: 4px;"
         type="button"
       >
@@ -116,7 +116,7 @@ Array [
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -162,7 +162,7 @@ Array [
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -216,7 +216,7 @@ Array [
         class="ant-flex ant-flex-align-center ant-flex-vertical"
       >
         <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; margin: 4px;"
           type="button"
         >
@@ -262,7 +262,7 @@ Array [
           </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"
           style="width: 80px; margin: 4px;"
           type="button"
         >
@@ -308,7 +308,7 @@ Array [
           </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"
           style="width: 80px; margin: 4px;"
           type="button"
         >
@@ -358,7 +358,7 @@ Array [
         class="ant-flex ant-flex-align-center ant-flex-vertical"
       >
         <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; margin: 4px;"
           type="button"
         >
@@ -404,7 +404,7 @@ Array [
           </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"
           style="width: 80px; margin: 4px;"
           type="button"
         >
@@ -450,7 +450,7 @@ Array [
           </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"
           style="width: 80px; margin: 4px;"
           type="button"
         >
@@ -502,7 +502,7 @@ Array [
       style="white-space: nowrap;"
     >
       <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; margin: 4px;"
         type="button"
       >
@@ -548,7 +548,7 @@ Array [
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -594,7 +594,7 @@ Array [
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1067,7 +1067,7 @@ exports[`renders components/popover/demo/arrow-point-at-center.tsx extend contex
 exports[`renders components/popover/demo/basic.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>
@@ -1192,7 +1192,7 @@ exports[`renders components/popover/demo/component-token.tsx extend context corr
 exports[`renders components/popover/demo/control.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>
@@ -1237,7 +1237,7 @@ exports[`renders components/popover/demo/control.tsx extend context correctly 2`
 exports[`renders components/popover/demo/hover-with-click.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"
     type="button"
   >
     <span>
@@ -1323,7 +1323,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
     style="white-space: nowrap;"
   >
     <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; margin: 4px;"
       type="button"
     >
@@ -1369,7 +1369,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
       </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"
       style="width: 80px; margin: 4px;"
       type="button"
     >
@@ -1415,7 +1415,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
       </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"
       style="width: 80px; margin: 4px;"
       type="button"
     >
@@ -1469,7 +1469,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
       class="ant-flex ant-flex-align-center ant-flex-vertical"
     >
       <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; margin: 4px;"
         type="button"
       >
@@ -1515,7 +1515,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1561,7 +1561,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1611,7 +1611,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
       class="ant-flex ant-flex-align-center ant-flex-vertical"
     >
       <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; margin: 4px;"
         type="button"
       >
@@ -1657,7 +1657,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1703,7 +1703,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
         </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"
         style="width: 80px; margin: 4px;"
         type="button"
       >
@@ -1755,7 +1755,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
     style="white-space: nowrap;"
   >
     <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; margin: 4px;"
       type="button"
     >
@@ -1801,7 +1801,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
       </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"
       style="width: 80px; margin: 4px;"
       type="button"
     >
@@ -1847,7 +1847,7 @@ exports[`renders components/popover/demo/placement.tsx extend context correctly
       </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"
       style="width: 80px; margin: 4px;"
       type="button"
     >
@@ -2022,7 +2022,7 @@ exports[`renders components/popover/demo/triggerType.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="button"
     >
       <span>
@@ -2069,7 +2069,7 @@ exports[`renders components/popover/demo/triggerType.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="button"
     >
       <span>
@@ -2116,7 +2116,7 @@ exports[`renders components/popover/demo/triggerType.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="button"
     >
       <span>

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

@@ -70,7 +70,7 @@ Array [
       style="white-space:nowrap"
     >
       <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;margin:4px"
         type="button"
       >
@@ -79,7 +79,7 @@ Array [
         </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="width:80px;margin:4px"
         type="button"
       >
@@ -88,7 +88,7 @@ Array [
         </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="width:80px;margin:4px"
         type="button"
       >
@@ -105,7 +105,7 @@ Array [
         class="ant-flex ant-flex-align-center ant-flex-vertical"
       >
         <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;margin:4px"
           type="button"
         >
@@ -114,7 +114,7 @@ Array [
           </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="width:80px;margin:4px"
           type="button"
         >
@@ -123,7 +123,7 @@ Array [
           </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="width:80px;margin:4px"
           type="button"
         >
@@ -136,7 +136,7 @@ Array [
         class="ant-flex ant-flex-align-center ant-flex-vertical"
       >
         <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;margin:4px"
           type="button"
         >
@@ -145,7 +145,7 @@ Array [
           </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="width:80px;margin:4px"
           type="button"
         >
@@ -154,7 +154,7 @@ Array [
           </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="width:80px;margin:4px"
           type="button"
         >
@@ -169,7 +169,7 @@ Array [
       style="white-space:nowrap"
     >
       <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;margin:4px"
         type="button"
       >
@@ -178,7 +178,7 @@ Array [
         </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="width:80px;margin:4px"
         type="button"
       >
@@ -187,7 +187,7 @@ Array [
         </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="width:80px;margin:4px"
         type="button"
       >
@@ -618,7 +618,7 @@ exports[`renders components/popover/demo/arrow-point-at-center.tsx correctly 1`]
 
 exports[`renders components/popover/demo/basic.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>
@@ -702,7 +702,7 @@ Array [
 
 exports[`renders components/popover/demo/control.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>
@@ -713,7 +713,7 @@ exports[`renders components/popover/demo/control.tsx correctly 1`] = `
 
 exports[`renders components/popover/demo/hover-with-click.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>
@@ -731,7 +731,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     style="white-space:nowrap"
   >
     <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;margin:4px"
       type="button"
     >
@@ -740,7 +740,7 @@ exports[`renders components/popover/demo/placement.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="width:80px;margin:4px"
       type="button"
     >
@@ -749,7 +749,7 @@ exports[`renders components/popover/demo/placement.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="width:80px;margin:4px"
       type="button"
     >
@@ -766,7 +766,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
       class="ant-flex ant-flex-align-center ant-flex-vertical"
     >
       <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;margin:4px"
         type="button"
       >
@@ -775,7 +775,7 @@ exports[`renders components/popover/demo/placement.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="width:80px;margin:4px"
         type="button"
       >
@@ -784,7 +784,7 @@ exports[`renders components/popover/demo/placement.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="width:80px;margin:4px"
         type="button"
       >
@@ -797,7 +797,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
       class="ant-flex ant-flex-align-center ant-flex-vertical"
     >
       <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;margin:4px"
         type="button"
       >
@@ -806,7 +806,7 @@ exports[`renders components/popover/demo/placement.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="width:80px;margin:4px"
         type="button"
       >
@@ -815,7 +815,7 @@ exports[`renders components/popover/demo/placement.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="width:80px;margin:4px"
         type="button"
       >
@@ -830,7 +830,7 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
     style="white-space:nowrap"
   >
     <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;margin:4px"
       type="button"
     >
@@ -839,7 +839,7 @@ exports[`renders components/popover/demo/placement.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="width:80px;margin:4px"
       type="button"
     >
@@ -848,7 +848,7 @@ exports[`renders components/popover/demo/placement.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="width:80px;margin:4px"
       type="button"
     >
@@ -980,7 +980,7 @@ exports[`renders components/popover/demo/triggerType.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>
@@ -992,7 +992,7 @@ exports[`renders components/popover/demo/triggerType.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>
@@ -1004,7 +1004,7 @@ exports[`renders components/popover/demo/triggerType.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/progress/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1646,7 +1646,7 @@ exports[`renders components/progress/demo/dynamic.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
@@ -1674,7 +1674,7 @@ exports[`renders components/progress/demo/dynamic.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/progress/__tests__/__snapshots__/demo.test.ts.snap

@@ -1524,7 +1524,7 @@ exports[`renders components/progress/demo/dynamic.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
@@ -1552,7 +1552,7 @@ exports[`renders components/progress/demo/dynamic.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/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3,7 +3,7 @@
 exports[`renders components/qr-code/demo/Popover.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>
@@ -125,7 +125,7 @@ Array [
     style="margin-bottom: 16px;"
   >
     <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
@@ -156,7 +156,7 @@ Array [
       </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
@@ -301,7 +301,7 @@ exports[`renders components/qr-code/demo/customStatusRender.tsx extend context c
          QR code expired
         <p>
           <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
@@ -450,7 +450,7 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
         />
       </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>
@@ -633,7 +633,7 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
         QR code expired
       </p>
       <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

components/qr-code/__tests__/__snapshots__/demo.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`renders components/qr-code/demo/Popover.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>
@@ -85,7 +85,7 @@ Array [
     style="margin-bottom:16px"
   >
     <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
@@ -116,7 +116,7 @@ Array [
       </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
@@ -260,7 +260,7 @@ exports[`renders components/qr-code/demo/customStatusRender.tsx correctly 1`] =
         QR code expired
         <p>
           <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
@@ -408,7 +408,7 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
         />
       </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>
@@ -585,7 +585,7 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
         QR code expired
       </p>
       <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

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

@@ -472,7 +472,7 @@ Array [
   </label>,
   <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"
     style="margin-top: 16px;"
     type="button"
   >