feat(Button): support ghost + text button (#3163)

Tencent · Sep 29, 2024 · 7a0ce6f · 7a0ce6f
1 parent 673dee2
commit 7a0ce6f
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 65 deletions.
diff --git a/src/button/README.en-US.md b/src/button/README.en-US.md
@@ -127,6 +127,7 @@ t-class | \-
 t-class-icon | class name of icon
 t-class-loading | class name of loading
 
+
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles.
@@ -144,7 +145,7 @@ Name | Default Value | Description
 --td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - 
 --td-button-danger-disabled-bg | @error-color-3 | - 
 --td-button-danger-disabled-border-color | @error-color-3 | - 
---td-button-danger-disabled-color | @font-white-1 | - 
+--td-button-danger-disabled-color | @error-color-disabled | - 
 --td-button-danger-outline-active-bg-color | @bg-color-container-active | - 
 --td-button-danger-outline-active-border-color | @error-color-7 | - 
 --td-button-danger-outline-border-color | @button-danger-outline-color | - 
@@ -157,14 +158,14 @@ Name | Default Value | Description
 --td-button-default-active-border-color | @bg-color-component-active | - 
 --td-button-default-bg-color | @bg-color-component | - 
 --td-button-default-border-color | @bg-color-component | - 
---td-button-default-color | @font-gray-1 | - 
+--td-button-default-color | @text-color-primary | - 
 --td-button-default-disabled-bg | @bg-color-component-disabled | - 
 --td-button-default-disabled-border-color | @bg-color-component-disabled | - 
---td-button-default-disabled-color | @font-gray-4 | - 
+--td-button-default-disabled-color | @text-color-disabled | - 
 --td-button-default-outline-active-bg-color | @bg-color-container-active | - 
 --td-button-default-outline-active-border-color | @component-border | - 
 --td-button-default-outline-border-color | @component-border | - 
---td-button-default-outline-color | @font-gray-1 | - 
+--td-button-default-outline-color | @text-color-primary | - 
 --td-button-default-outline-disabled-color | @component-border | - 
 --td-button-default-text-active-bg-color | @bg-color-container-active | - 
 --td-button-extra-small-font-size | @font-size-base | - 
@@ -176,9 +177,12 @@ Name | Default Value | Description
 --td-button-ghost-color | @bg-color-container | - 
 --td-button-ghost-danger-border-color | @error-color | - 
 --td-button-ghost-danger-color | @error-color | - 
---td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | - 
+--td-button-ghost-danger-hover-color | @error-color-active | - 
+--td-button-ghost-disabled-color | @font-white-4 | - 
+--td-button-ghost-hover-color | @font-white-2 | - 
 --td-button-ghost-primary-border-color | @brand-color | - 
 --td-button-ghost-primary-color | @brand-color | - 
+--td-button-ghost-primary-hover-color | @brand-color-active | - 
 --td-button-icon-border-radius | 8rpx | - 
 --td-button-icon-spacer | @spacer | - 
 --td-button-large-font-size | @font-size-m | - 
@@ -227,4 +231,4 @@ Name | Default Value | Description
 --td-button-small-font-size | @font-size-base | - 
 --td-button-small-height | 64rpx | - 
 --td-button-small-icon-font-size | 36rpx | - 
---td-button-small-padding-horizontal | 24rpx | -
+--td-button-small-padding-horizontal | 24rpx | - 
diff --git a/src/button/README.md b/src/button/README.md
@@ -129,6 +129,7 @@ t-class | 根节点样式类
 t-class-icon | 图标样式类
 t-class-loading | 加载样式类
 
+
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。
@@ -146,7 +147,7 @@ t-class-loading | 加载样式类
 --td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - 
 --td-button-danger-disabled-bg | @error-color-3 | - 
 --td-button-danger-disabled-border-color | @error-color-3 | - 
---td-button-danger-disabled-color | @font-white-1 | - 
+--td-button-danger-disabled-color | @error-color-disabled | - 
 --td-button-danger-outline-active-bg-color | @bg-color-container-active | - 
 --td-button-danger-outline-active-border-color | @error-color-7 | - 
 --td-button-danger-outline-border-color | @button-danger-outline-color | - 
@@ -159,14 +160,14 @@ t-class-loading | 加载样式类
 --td-button-default-active-border-color | @bg-color-component-active | - 
 --td-button-default-bg-color | @bg-color-component | - 
 --td-button-default-border-color | @bg-color-component | - 
---td-button-default-color | @font-gray-1 | - 
+--td-button-default-color | @text-color-primary | - 
 --td-button-default-disabled-bg | @bg-color-component-disabled | - 
 --td-button-default-disabled-border-color | @bg-color-component-disabled | - 
---td-button-default-disabled-color | @font-gray-4 | - 
+--td-button-default-disabled-color | @text-color-disabled | - 
 --td-button-default-outline-active-bg-color | @bg-color-container-active | - 
 --td-button-default-outline-active-border-color | @component-border | - 
 --td-button-default-outline-border-color | @component-border | - 
---td-button-default-outline-color | @font-gray-1 | - 
+--td-button-default-outline-color | @text-color-primary | - 
 --td-button-default-outline-disabled-color | @component-border | - 
 --td-button-default-text-active-bg-color | @bg-color-container-active | - 
 --td-button-extra-small-font-size | @font-size-base | - 
@@ -178,9 +179,12 @@ t-class-loading | 加载样式类
 --td-button-ghost-color | @bg-color-container | - 
 --td-button-ghost-danger-border-color | @error-color | - 
 --td-button-ghost-danger-color | @error-color | - 
---td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | - 
+--td-button-ghost-danger-hover-color | @error-color-active | - 
+--td-button-ghost-disabled-color | @font-white-4 | - 
+--td-button-ghost-hover-color | @font-white-2 | - 
 --td-button-ghost-primary-border-color | @brand-color | - 
 --td-button-ghost-primary-color | @brand-color | - 
+--td-button-ghost-primary-hover-color | @brand-color-active | - 
 --td-button-icon-border-radius | 8rpx | - 
 --td-button-icon-spacer | @spacer | - 
 --td-button-large-font-size | @font-size-m | - 
@@ -229,4 +233,4 @@ t-class-loading | 加载样式类
 --td-button-small-font-size | @font-size-base | - 
 --td-button-small-height | 64rpx | - 
 --td-button-small-icon-font-size | 36rpx | - 
---td-button-small-padding-horizontal | 24rpx | -
+--td-button-small-padding-horizontal | 24rpx | - 
diff --git a/src/button/button.less b/src/button/button.less
@@ -55,7 +55,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
@@ -94,11 +94,14 @@
 // 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, 0.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);
+@button-ghost-primary-hover-color: var(--td-button-ghost-primary-hover-color, @brand-color-active);
 @button-ghost-danger-color: var(--td-button-ghost-danger-color, @error-color);
 @button-ghost-danger-border-color: var(--td-button-ghost-danger-border-color, @error-color);
+@button-ghost-danger-hover-color: var(--td-button-ghost-danger-hover-color, @error-color-active);
 
 // 激活态背景和边框色
 @button-default-active-bg-color: var(--td-button-default-active-bg-color, @bg-color-component-active);
@@ -194,6 +197,48 @@
 .button-theme(light);
 .button-theme(danger);
 
+.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} {
   display: inline-flex;
   align-items: center;
@@ -222,7 +267,7 @@
 
   &--text {
     color: @button-default-color;
-    background-color: @bg-color-container;
+    background-color: transparent;
 
     &,
     &::after {
@@ -236,7 +281,7 @@
 
     &.@{button}--primary {
       color: @button-primary-text-color;
-      background-color: @bg-color-container;
+      background-color: transparent;
 
       &.@{button}--hover,
       &.@{button}--hover::after {
@@ -251,7 +296,7 @@
 
     &.@{button}--danger {
       color: @button-danger-text-color;
-      background-color: @bg-color-container;
+      background-color: transparent;
 
       &.@{button}--hover,
       &.@{button}--hover::after {
@@ -266,7 +311,7 @@
 
     &.@{button}--light {
       color: @button-light-text-color;
-      background-color: @bg-color-container;
+      background-color: transparent;
 
       &.@{button}--hover,
       &.@{button}--hover::after {
@@ -279,49 +324,6 @@
     }
   }
 
-  &--ghost {
-    background-color: transparent;
-    color: @button-ghost-color;
-
-    &,
-    &::after {
-      border-color: @button-ghost-border-color;
-    }
-
-    &.@{button}--hover,
-    &.@{button}--hover::after {
-      background: none;
-    }
-
-    &.@{button}--primary {
-      color: @button-ghost-primary-color;
-
-      &,
-      &::after {
-        border-color: @button-ghost-primary-border-color;
-      }
-    }
-
-    &.@{button}--danger {
-      color: @button-ghost-danger-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;
-      }
-    }
-  }
-
   &--outline {
     color: @button-default-outline-color;
     background-color: @bg-color-container;
@@ -438,6 +440,10 @@
     border-style: dashed;
     border-width: 2rpx;
 
+    &::after {
+      border: 0;
+    }
+
     &.@{button}--hover,
     &.@{button}--hover::after {
       background-color: @button-default-outline-active-bg-color;
@@ -447,30 +453,29 @@
     &.@{button}--primary {
       color: @button-primary-dashed-color;
 
+      &,
       &::after {
         border-color: @button-primary-dashed-border-color;
-        border: 0;
       }
-      border-color: @button-primary-dashed-border-color;
 
       &.@{button}--disabled {
         background-color: @bg-color-container;
         color: @button-primary-dashed-disabled-color;
 
+        &,
         &::after {
           border-color: @button-primary-dashed-disabled-color;
         }
-        border-color: @button-primary-dashed-disabled-color;
       }
     }
 
     &.@{button}--danger {
       color: @button-danger-dashed-color;
 
+      &,
       &::after {
         border-color: @button-danger-dashed-border-color;
       }
-      border-color: @button-danger-dashed-border-color;
 
       &.@{button}--disabled {
         background-color: transparent;
@@ -483,6 +488,31 @@
     }
   }
 
+  &--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);
+  }
+
   &__loading + &__content:not(:empty),
   &__icon + &__content:not(:empty) {
     margin-left: 8rpx;