Fix danger button ghost style

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

@@ -266,7 +266,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
     type="button"
   >
     <span>
-      Primary Ghost
+      Primary
     </span>
   </button>
   <button
@@ -274,7 +274,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
     type="button"
   >
     <span>
-      Default Ghost
+      Default
     </span>
   </button>
   <button
@@ -282,7 +282,15 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
     type="button"
   >
     <span>
-      Dashed Ghost
+      Dashed
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-danger ant-btn-background-ghost"
+    type="button"
+  >
+    <span>
+      danger
     </span>
   </button>
 </div>

components/button/demo/ghost.md

@@ -18,9 +18,10 @@ import { Button } from 'antd';
 
 ReactDOM.render(
   <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
-    <Button type="primary" ghost>Primary Ghost</Button>
-    <Button ghost>Default Ghost</Button>
-    <Button type="dashed" ghost>Dashed Ghost</Button>
+    <Button type="primary" ghost>Primary</Button>
+    <Button ghost>Default</Button>
+    <Button type="dashed" ghost>Dashed</Button>
+    <Button type="danger" ghost>danger</Button>
   </div>
 , mountNode);
 ````

components/button/style/index.less

@@ -148,7 +148,11 @@
   }
 
   &-background-ghost&-primary {
-    .button-variant-other(@primary-color; transparent; @primary-color);
+    .button-variant-ghost(@primary-color);
+  }
+
+  &-background-ghost&-danger {
+    .button-variant-ghost(@btn-danger-bg);
   }
 }
 

components/button/style/mixin.less

@@ -39,7 +39,7 @@
 
   &:hover,
   &:focus {
-    .button-color(@primary-5; @background; @primary-5);
+    .button-color(@primary-color; @background; @primary-color);
   }
 
   &:active,
@@ -50,6 +50,22 @@
   .button-disabled();
 }
 
+.button-variant-ghost(@color) {
+  .button-color(@color; transparent; @color);
+
+  &:hover,
+  &:focus {
+    .button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`);
+  }
+
+  &:active,
+  &.active {
+    .button-color(~`colorPalette("@{color}", 7)`; transparent; ~`colorPalette("@{color}", 7)`);
+  }
+
+  .button-disabled();
+}
+
 .button-color(@color; @background; @border) {
   color: @color;
   background-color: @background;