fix(Button): default button token (#56719)

* fix(Button): default button token

* feat(Button): add default button token with custom colors in debug demo

---------

Co-authored-by: lijianan <574980606@qq.com>

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

@@ -980,6 +980,18 @@ exports[`renders components/button/demo/debug-color-variant.tsx extend context c
       </span>
     </button>
   </div>
+  <div
+    class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
+  >
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        default button token
+      </span>
+    </button>
+  </div>
 </div>
 `;
 

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

@@ -964,6 +964,18 @@ exports[`renders components/button/demo/debug-color-variant.tsx correctly 1`] =
       </span>
     </button>
   </div>
+  <div
+    class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
+  >
+    <button
+      class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        default button token
+      </span>
+    </button>
+  </div>
 </div>
 `;
 

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

@@ -130,6 +130,29 @@ const App: React.FC = () => {
           <Button type="text">type="text" (Default)</Button>
         </ConfigProvider>
       </Flex>
+      <Flex gap="small" wrap>
+        <ConfigProvider
+          theme={{
+            components: {
+              Button: {
+                textTextColor: '#f60',
+                textTextHoverColor: '#722ed1',
+                textTextActiveColor: '#0f0',
+                textHoverBg: '#000',
+
+                defaultColor: 'red',
+                defaultBorderColor: 'blue',
+                defaultHoverColor: 'yellow',
+                defaultHoverBorderColor: 'green',
+                defaultActiveColor: 'purple',
+                defaultActiveBorderColor: 'orange',
+              },
+            },
+          }}
+        >
+          <Button type="default">default button token</Button>
+        </ConfigProvider>
+      </Flex>
     </Flex>
   );
 };

components/button/style/variant.ts

@@ -218,9 +218,9 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
           [varName('color-light-hover')]: token.colorFillSecondary,
           [varName('color-light-active')]: token.colorFill,
 
-          [varName('text-color')]: token.colorText,
+          [varName('text-color')]: token.defaultColor,
-          [varName('text-color-hover')]: token.defaultHoverBorderColor,
+          [varName('text-color-hover')]: token.defaultHoverColor,
-          [varName('text-color-active')]: token.defaultActiveBorderColor,
+          [varName('text-color-active')]: token.defaultActiveColor,
           [varName('shadow')]: token.defaultShadow,
 
           [`&${componentCls}-variant-solid`]: {