From f8b8471281bc07edf4fa50e916e3d7a6852ff136 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Thu, 26 Sep 2024 20:36:53 +0800
Subject: [PATCH] feat(Button): support ghost + text button

---
 style/mobile/components/button/v2/_index.less | 122 +++++++++---------
 style/mobile/components/button/v2/_var.less   |   4 +-
 2 files changed, 66 insertions(+), 60 deletions(-)

diff --git a/style/mobile/components/button/v2/_index.less b/style/mobile/components/button/v2/_index.less
index 81c3f38b7d..cd6a670a36 100644
--- a/style/mobile/components/button/v2/_index.less
+++ b/style/mobile/components/button/v2/_index.less
@@ -60,6 +60,47 @@
   }
 }
 
+.ghost-theme(@theme) {
+  @color: "button-ghost-@{theme}-color";
+  @hoverColor: "button-ghost-@{theme}-hover-color";
+  @borderColor: "button-ghost-@{theme}-border-color";
+
+  &.@{button}--@{theme} when (@theme = primary), (@theme = danger) {
+    color: @@color;
+
+    &::after {
+      border-color: @@borderColor;
+    }
+
+    &.@{button}--hover {
+      color: @@hoverColor;
+
+      &::after {
+        background-color: transparent;
+        border-color: @@hoverColor;
+      }
+    }
+  }
+
+
+  &.@{button}--@{theme} {
+
+    &.@{button}--text.@{button}--hover,
+    &.@{button}--text.@{button}--hover::after {
+      background-color: @gray-color-10;
+    }
+
+    &.@{button}--disabled {
+      background-color: transparent;
+      color: @button-ghost-disabled-color;
+
+      &::after {
+        border-color: @button-ghost-disabled-color;
+      }
+    }
+  }
+}
+
 .button-size(extra-small);
 .button-size(small);
 .button-size(medium);
@@ -165,64 +206,6 @@
     }
   }
 
-  &--ghost {
-    background-color: transparent;
-    color: @button-ghost-color;
-
-    &::after {
-      border-color: @button-ghost-border-color;
-    }
-
-    &.@{button}--hover {
-      color: @button-ghost-hover-color;
-
-      &::after {
-        background: none;
-      }
-    }
-
-    &.@{button}--primary {
-      color: @button-ghost-primary-color;
-
-      &.@{button}--hover {
-        color: @button-ghost-primary-hover-color;
-
-        &::after {
-          border-color: @button-ghost-primary-hover-color;
-        }
-      }
-
-      &::after {
-        border-color: @button-ghost-primary-border-color;
-      }
-    }
-
-    &.@{button}--danger {
-      color: @button-ghost-danger-color;
-
-      &.@{button}--hover {
-        color: @button-ghost-danger-hover-color;
-
-        &::after {
-          border-color: @button-ghost-danger-hover-color;
-        }
-      }
-
-      &::after {
-        border-color: @button-ghost-danger-border-color;
-      }
-    }
-
-    &.@{button}--disabled {
-      background-color: transparent;
-      color: @button-ghost-disabled-color;
-
-      &::after {
-        border-color: @button-ghost-disabled-color;
-      }
-    }
-  }
-
   &--dashed,
   &--outline {
     color: @button-default-outline-color;
@@ -331,6 +314,29 @@
     }
   }
 
+  &--ghost {
+    background-color: transparent;
+    color: @button-ghost-color;
+
+    &::after {
+      border-color: @button-ghost-border-color;
+    }
+
+    &.@{button}--default.@{button}--hover {
+      color: @button-ghost-hover-color;
+
+      &::after {
+        background-color: transparent;
+        border-color: @button-ghost-hover-color;
+      }
+    }
+
+    // 不考虑 ghost + light 场景
+    .ghost-theme(primary);
+    .ghost-theme(danger);
+    .ghost-theme(default);
+  }
+
   .@{prefix}-loading + &__content:not(:empty),
   .@{prefix}-icon + &__content:not(:empty),
   &__content:not(:empty) + .@{prefix}-icon {
diff --git a/style/mobile/components/button/v2/_var.less b/style/mobile/components/button/v2/_var.less
index 2c0d0ffa9e..0110ee0281 100644
--- a/style/mobile/components/button/v2/_var.less
+++ b/style/mobile/components/button/v2/_var.less
@@ -53,7 +53,7 @@
 @button-danger-color: var(--td-button-danger-color, @font-white-1);
 @button-danger-border-color: var(--td-button-danger-border-color, @error-color);
 @button-danger-bg-color: var(--td-button-danger-bg-color, @error-color);
-@button-danger-disabled-color: var(--td-button-danger-disabled-color, @font-white-1);
+@button-danger-disabled-color: var(--td-button-danger-disabled-color, @error-color-disabled);
 @button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3);
 @button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3);
 // default + outline
@@ -85,7 +85,7 @@
 // ghost 优先级高于 theme，固定透明背景，白色边框，白色字体
 @button-ghost-color: var(--td-button-ghost-color, @bg-color-container);
 @button-ghost-border-color: var(--td-button-ghost-border-color, @button-ghost-color);
-@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, .35));
+@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, @font-white-4);
 @button-ghost-hover-color: var(--td-button-ghost-hover-color, @font-white-2);
 @button-ghost-primary-color: var(--td-button-ghost-primary-color, @brand-color);
 @button-ghost-primary-border-color: var(--td-button-ghost-primary-border-color, @brand-color);