feat(Button): support ghost + text button

Tencent · Sep 26, 2024 · f8b8471 · f8b8471
1 parent 6224ffc
commit f8b8471
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 60 deletions.
diff --git 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
@@ -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);