fix(button): fix

opentiny · Sep 26, 2024 · ae80c21 · ae80c21
1 parent 1e8355d
commit ae80c21
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/examples/sites/demos/pc/app/button/ghost.spec.ts b/examples/sites/demos/pc/app/button/ghost.spec.ts
@@ -16,61 +16,61 @@ test('幽灵按钮', async ({ page }) => {
   await page.waitForTimeout(100)
   await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(25, 25, 25)')
   await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
+  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(25, 25, 25)')
 
   // 次要幽灵按钮
   await page.waitForTimeout(1000)
-  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(89, 89, 89)')
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(25, 25, 25)')
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(89, 89, 89)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
   await page.waitForTimeout(100)
   await getGhostBtn(1).click()
   await page.waitForTimeout(100)
-  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(89, 89, 89)')
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(25, 25, 25)')
   await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(25, 25, 25)')
 
   // 成功幽灵按钮
   await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(92, 179, 0)')
   await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(92, 179, 0)')
+  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(218, 242, 187)')
   await page.waitForTimeout(100)
   await getGhostBtn(2).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(92, 179, 0)')
   await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(218, 242, 187)')
+  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(92, 179, 0)')
 
   // 信息幽灵按钮
   await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(20, 118, 255)')
   await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(20, 118, 255)')
+  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(222, 236, 255)')
   await page.waitForTimeout(100)
   await getGhostBtn(3).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(20, 118, 255)')
   await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(222, 236, 255)')
+  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(20, 118, 255)')
 
   // 告警幽灵按钮
   await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(255, 136, 0)')
   await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 136, 0)')
+  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 235, 209)')
   await page.waitForTimeout(100)
   await getGhostBtn(4).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(255, 136, 0)')
   await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 235, 209)')
+  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(255, 136, 0)')
 
   // 危险幽灵按钮
   await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(242, 48, 48)')
   await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(242, 48, 48)')
+  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(252, 226, 224)')
   await page.waitForTimeout(100)
   await getGhostBtn(5).click()
   await page.waitForTimeout(100)
   await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(242, 48, 48)')
   await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
-  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(252, 226, 224)')
+  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(242, 48, 48)')
 })
diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less
@@ -160,12 +160,12 @@
     }
   }
 
-  //  ghost： 默认继承plain的状态， 但是bg 强制为透明,比激活态还高  优先级为：四级类名
-  &.is-ghost.is-ghost.is-ghost.is-ghost {
+  //  ghost： 默认继承plain的状态， 但是bg 强制为透明，比禁用还高  优先级为：六级类名
+  &.is-ghost.is-ghost.is-ghost.is-ghost.is-ghost.is-ghost {
     background-color: var(--tv-Button-bg-color-ghost);
   }
 
-  // 禁用态+loading  优先级最高， 大于ghost透明， 五优先级
+  // 禁用态+loading  优先级最高， 五优先级
   &.is-disabled.is-disabled.is-disabled.is-disabled.is-disabled,
   &.is-loading.is-loading.is-loading.is-loading.is-loading,
   &[disabled][disabled][disabled][disabled][disabled] {
@@ -174,6 +174,10 @@
     border-color: var(--tv-Button-border-color-disabled);
     fill: var(--tv-Button-icon-color-disabled);
     cursor: not-allowed;
+
+    &.is-ghost {
+      border-color: var(--tv-Button-border-color-ghost-disabled);
+    }
   }
 
   /** 4、图标 + 文字场景 */

diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
@@ -233,7 +233,9 @@
   // 禁用时按钮背景色
   --tv-Button-bg-color-disabled: var(--tv-color-bg-disabled);
   // 禁用时按钮边框色
-  --tv-Button-border-color-disabled: var(--tv-color-border-disabled);
+  --tv-Button-border-color-disabled: var(--tv-color-bg-disabled); // 设计边框是f0f0f0，没这个值，用背景色代替。
+  // 禁用时, 幽灵按钮的边框色
+  --tv-Button-border-color-ghost-disabled: var(--tv-color-border-disabled);
   // 禁用时按钮图标色
   --tv-Button-icon-color-disabled: var(--tv-color-icon-disabled); // level4 结束---------------------------