BI-50015 refactor: 按钮灰化背景视觉修改

src/css/base/single/button/button.css

@@ -187,7 +187,8 @@ body .bi-button.button-error.disabled.base-disabled,
 #body .bi-button.button-error.disabled.base-disabled,
 body .bi-button.button-warning.disabled.base-disabled,
 #body .bi-button.button-warning.disabled.base-disabled {
-  background: #f2f4f7 !important;
+  background-color: rgba(158, 166, 178, 0.2) !important;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#339ea6b2,endColorstr=#339ea6b2);
   border-color: #d0d4da !important;
 }
 body .bi-button.button-common.disabled,
@@ -479,3 +480,22 @@ body .bi-button.button-ignore.disabled.ghost .b-font:before,
 .bi-theme-dark #body .bi-button.button-common.disabled.ghost .b-font:before {
   color: #ffffff !important;
 }
+.bi-theme-dark body .bi-button.button-success.disabled,
+.bi-theme-dark #body .bi-button.button-success.disabled,
+.bi-theme-dark body .bi-button.button-error.disabled,
+.bi-theme-dark #body .bi-button.button-error.disabled,
+.bi-theme-dark body .bi-button.button-warning.disabled,
+.bi-theme-dark #body .bi-button.button-warning.disabled,
+.bi-theme-dark body .bi-button.button-ignore.disabled,
+.bi-theme-dark #body .bi-button.button-ignore.disabled,
+.bi-theme-dark body .bi-button.button-success.disabled.base-disabled,
+.bi-theme-dark #body .bi-button.button-success.disabled.base-disabled,
+.bi-theme-dark body .bi-button.button-error.disabled.base-disabled,
+.bi-theme-dark #body .bi-button.button-error.disabled.base-disabled,
+.bi-theme-dark body .bi-button.button-warning.disabled.base-disabled,
+.bi-theme-dark #body .bi-button.button-warning.disabled.base-disabled,
+.bi-theme-dark body .bi-button.button-ignore.disabled.base-disabled,
+.bi-theme-dark #body .bi-button.button-ignore.disabled.base-disabled {
+  background-color: rgba(135, 141, 159, 0.2) !important;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33878d9f,endColorstr=#33878d9f);
+}

src/less/base/single/button/button.less

@@ -125,7 +125,9 @@ body .bi-button, #body .bi-button {
       &, & .b-font:before {
         color: @color-bi-text-disabled !important;
       }
-      background: @color-bi-background-disabled !important;
+      background-color: fade(@color-bi-background-light-disabled, 20%) !important;
+      @ieColor: argb(fade(@color-bi-background-light-disabled, 20%));
+      filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
       border-color: @color-bi-border-disabled !important;
     }
     &:after {
@@ -270,5 +272,15 @@ body .bi-button, #body .bi-button {
         .opacity(0.5);
       }
     }
+    &.button-success.disabled,
+    &.button-error.disabled,
+    &.button-warning.disabled,
+    &.button-ignore.disabled {
+      &, &.base-disabled {
+        background-color: fade(@color-bi-background-light-disabled-theme-dark, 20%) !important;
+        @ieColor: argb(fade(@color-bi-background-light-disabled-theme-dark, 20%));
+        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
+      }
+    }
   }
 }

src/less/lib/colors.less

@@ -66,6 +66,10 @@
 @color-bi-background-disabled: @background-color-disabled;
 //深色主题灰化背景
 @color-bi-background-disabled-theme-dark: @background-color-disabled-theme-dark;
+//浅灰化背景
+@color-bi-background-light-disabled: @background-color-light-disabled;
+//深色主题浅灰化背景
+@color-bi-background-light-disabled-theme-dark: @background-color-light-disabled-theme-dark;
 //成功背景色
 @color-bi-background-success: @background-color-dark-success;
 //成功背景色(浅)

src/less/lib/constant.less

@@ -68,6 +68,8 @@
 @background-color-dark-gray-theme-dark: #606479;
 @background-color-disabled: #f2f4f7;
 @background-color-disabled-theme-dark: #292f45;
+@background-color-light-disabled: #9ea6b2;
+@background-color-light-disabled-theme-dark: #878d9f;
 @background-color-yellow: #ffc101;
 
 @background-color-negative: #e65251;