fix: #24614 text button style inconsistent in `danger` (#24622)

* fix: update button style when type="text" of danger

* update wording in danger button demo

* format code

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

@@ -109,12 +109,20 @@ Array [
       Dashed
     </span>
   </button>,
+  <button
+    class="ant-btn ant-btn-text ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Text
+    </span>
+  </button>,
   <button
     class="ant-btn ant-btn-link ant-btn-dangerous"
     type="button"
   >
     <span>
-      link
+      Link
     </span>
   </button>,
 ]
@@ -176,6 +184,24 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     </span>
   </button>
   <br />
+  <button
+    class="ant-btn ant-btn-text"
+    type="button"
+  >
+    <span>
+      Text
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-text"
+    disabled=""
+    type="button"
+  >
+    <span>
+      Text(disabled)
+    </span>
+  </button>
+  <br />
   <button
     class="ant-btn ant-btn-link"
     type="button"
@@ -195,56 +221,56 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
   </button>
   <br />
   <button
-    class="ant-btn ant-btn-text"
+    class="ant-btn ant-btn-dangerous"
     type="button"
   >
     <span>
-      Text
+      Danger Default
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-text"
+    class="ant-btn ant-btn-dangerous"
     disabled=""
     type="button"
   >
     <span>
-      Text(disabled)
+      Danger Default(disabled)
     </span>
   </button>
   <br />
   <button
-    class="ant-btn ant-btn-link ant-btn-dangerous"
+    class="ant-btn ant-btn-text ant-btn-dangerous"
     type="button"
   >
     <span>
-      Danger Link
+      Danger Text
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-link ant-btn-dangerous"
+    class="ant-btn ant-btn-text ant-btn-dangerous"
     disabled=""
     type="button"
   >
     <span>
-      Danger Link(disabled)
+      Danger Text(disabled)
     </span>
   </button>
   <br />
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-link ant-btn-dangerous"
     type="button"
   >
     <span>
-      Danger Default
+      Danger Link
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-link ant-btn-dangerous"
     disabled=""
     type="button"
   >
     <span>
-      Danger Default(disabled)
+      Danger Link(disabled)
     </span>
   </button>
   <div

components/button/demo/danger.md

@@ -25,8 +25,11 @@ ReactDOM.render(
     <Button type="dashed" danger>
       Dashed
     </Button>
+    <Button type="text" danger>
+      Text
+    </Button>
     <Button type="link" danger>
-      link
+      Link
     </Button>
   </>,
   mountNode,

components/button/demo/disabled.md

@@ -31,14 +31,26 @@ ReactDOM.render(
       Dashed(disabled)
     </Button>
     <br />
+    <Button type="text">Text</Button>
+    <Button type="text" disabled>
+      Text(disabled)
+    </Button>
+    <br />
     <Button type="link">Link</Button>
     <Button type="link" disabled>
       Link(disabled)
     </Button>
     <br />
-    <Button type="text">Text</Button>
-    <Button type="text" disabled>
-      Text(disabled)
+    <Button danger>Danger Default</Button>
+    <Button danger disabled>
+      Danger Default(disabled)
+    </Button>
+    <br />
+    <Button danger type="text">
+      Danger Text
+    </Button>
+    <Button danger type="text" disabled>
+      Danger Text(disabled)
     </Button>
     <br />
     <Button type="link" danger>
@@ -47,11 +59,6 @@ ReactDOM.render(
     <Button type="link" danger disabled>
       Danger Link(disabled)
     </Button>
-    <br />
-    <Button danger>Danger Default</Button>
-    <Button danger disabled>
-      Danger Default(disabled)
-    </Button>
     <div className="site-button-ghost-wrapper">
       <Button ghost>Ghost</Button>
       <Button ghost disabled>

components/button/style/index.less

@@ -95,6 +95,10 @@
     .btn-danger-link;
   }
 
+  &-dangerous&-text {
+    .btn-danger-text;
+  }
+
   &-icon-only {
     .btn-square(@btn-prefix-cls);
     vertical-align: -0.5px;

components/button/style/mixin.less

@@ -375,6 +375,29 @@
 
   .button-disabled(@disabled-color; transparent; transparent);
 }
+.btn-danger-text() {
+  .button-variant-other(@error-color, transparent, transparent);
+  box-shadow: none;
+  &:hover,
+  &:focus {
+    & when (@theme = dark) {
+      .button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
+    }
+    & when not (@theme = dark) {
+      .button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
+    }
+  }
+
+  &:active {
+    & when (@theme = dark) {
+      .button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
+    }
+    & when not (@theme = dark) {
+      .button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
+    }
+  }
+  .button-disabled(@disabled-color; transparent; transparent);
+}
 // round button
 .btn-round(@btnClassName: btn) {
   .button-size(@btn-circle-size; @btn-circle-size / 2; @font-size-base; @btn-circle-size);