DESIGN-4069 feat: 新增一套浅色按钮

demo/js/base/button/demo.button.js

@@ -242,6 +242,37 @@ Demo.Button = BI.inherit(BI.Widget, {
                 iconCls: "close-font",
                 iconPosition: "right"
             }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "浅色的一般按钮",
+                iconCls: "close-font",
+                light: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "浅色的成功按钮",
+                level: "success",
+                iconCls: "close-font",
+                light: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "浅色的警告按钮",
+                level: "warning",
+                iconCls: "close-font",
+                light: true
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                iconCls: "close-font",
+                text: "浅色的失败按钮",
+                level: "error",
+                light: true
+            }
         }];
         // BI.each(items, function (i, item) {
         //     item.el.handler = function () {

src/base/single/button/buttons/button.js

@@ -37,6 +37,7 @@
                 clear: false, // 是否去掉边框和背景
                 ghost: false, // 是否幽灵显示, 即正常状态无背景
                 loading: false, // 是否处于加载中
+                light: false, // 是否使用浅色
                 textAlign: "center",
                 whiteSpace: "nowrap",
                 textWidth: null,
@@ -59,7 +60,7 @@
             var lineHeight, textHeight = o.textHeight;
             if (BI.isNumber(o.height)) {
                 if (!isVertical(o.iconPosition)) {
-                    if (o.clear || o.block) {
+                    if (o.clear || o.block || o.light) {
                         lineHeight = o.height;
                     } else {
                         lineHeight = o.height - 2;
@@ -146,6 +147,9 @@
             if (o.loading === true) {
                 this.element.addClass("loading");
             }
+            if (o.light === true) {
+                this.element.addClass("light");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
             }
@@ -168,10 +172,10 @@
         },
 
         setLoading: function (loading) {
-            if(loading) {
-              this.element.addClass("loading");
+            if (loading) {
+                this.element.addClass("loading");
             } else {
-              this.element.removeClass("loading");
+                this.element.removeClass("loading");
             }
         },
 

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

@@ -41,6 +41,22 @@ body .bi-button, #body .bi-button {
     &, & .b-font:before {
       color: @color-bi-text-common-button;
     }
+    &.light {
+      border-width: 0;
+      background-color: @color-bi-background-common-light-button;
+
+      &, & .b-font:before {
+        color: @color-bi-text-common-light-button;
+      }
+
+      &:hover, &:focus {
+        background-color: @color-bi-background-hover-common-light-button;
+      }
+
+      &.active {
+        background-color: @color-bi-background-active-common-light-button;
+      }
+    }
     &.clear, &.clear .b-font:before {
       color: @color-bi-text-common-clear-button;
     }
@@ -92,6 +108,22 @@ body .bi-button, #body .bi-button {
       background-color: @color-bi-background-success-button;
       border-color: @color-bi-border-success-button;
     }
+    &.light {
+      border-width: 0;
+      background-color: @color-bi-background-success-light-button;
+
+      &, & .b-font:before {
+        color: @color-bi-text-success-light-button;
+      }
+
+      &:hover, &:focus {
+        background-color: @color-bi-background-hover-success-light-button;
+      }
+
+      &.active {
+        background-color: @color-bi-background-active-success-light-button;
+      }
+    }
     &.clear {
       &, & .b-font:before {
         color: @color-bi-text-success-clear-button;
@@ -121,6 +153,22 @@ body .bi-button, #body .bi-button {
       background-color: @color-bi-background-warning-button;
       border-color: @color-bi-border-warning-button;
     }
+    &.light {
+      border-width: 0;
+      background-color: @color-bi-background-warning-light-button;
+
+      &, & .b-font:before {
+        color: @color-bi-text-warning-light-button;
+      }
+
+      &:hover, &:focus {
+        background-color: @color-bi-background-hover-warning-light-button;
+      }
+
+      &.active {
+        background-color: @color-bi-background-active-warning-light-button;
+      }
+    }
     &.clear {
       &, & .b-font:before {
         color: @color-bi-text-warning-clear-button;
@@ -150,6 +198,22 @@ body .bi-button, #body .bi-button {
       background-color: @color-bi-background-error-button;
       border-color: @color-bi-border-error-button;
     }
+    &.light {
+      border-width: 0;
+      background-color: @color-bi-background-error-light-button;
+
+      &, & .b-font:before {
+        color: @color-bi-text-error-light-button;
+      }
+
+      &:hover, &:focus {
+        background-color: @color-bi-background-hover-error-light-button;
+      }
+
+      &.active {
+        background-color: @color-bi-background-active-error-light-button;
+      }
+    }
     &.clear {
       &, & .b-font:before {
         color: @color-bi-text-error-clear-button;

src/less/lib/colors.less

@@ -34,6 +34,7 @@
 @color-bi-text-success: @font-color-success;
 //失败字体颜色
 @color-bi-text-failure: @font-color-negative;
+
 //基本提亮颜色
 @color-bi-text-highlight: @font-color-highlight;
 //标红色
@@ -98,6 +99,9 @@
 @color-bi-background-highlight: @background-color-highlight;
 //背景提亮色(浅)
 @color-bi-background-light-highlight: @background-color-light-highlight;
+// 浅蓝色的背景
+@color-bi-background-light-blue: @color-blue-10;
+
 
 //黑色边框色
 @color-bi-border-black: @border-color-black;

src/less/lib/theme.less

@@ -72,6 +72,12 @@
 @color-bi-background-hover-common-ghost-button: @color-bi-background-highlight;
 @color-bi-text-hover-common-ghost-button-theme-dark: @color-bi-text-normal;
 @color-bi-background-hover-common-ghost-button-theme-dark: @color-bi-background-default;
+
+@color-bi-text-common-light-button: @color-bi-text-highlight;
+@color-bi-background-common-light-button: @color-bi-background-light-blue;
+@color-bi-background-hover-common-light-button: @color-bi-background-light-blue;
+@color-bi-background-active-common-light-button: @color-bi-background-light-blue;
+
 @color-bi-background-active-common-ghost-button: @color-bi-background-highlight;
 @color-bi-background-active-common-ghost-button-theme-dark: @color-bi-background-default;
 @color-bi-text-ignore-button: @color-bi-text-highlight;
@@ -80,18 +86,34 @@
 @color-bi-background-ignore-button-theme-dark: @color-bi-background-default-theme-dark;
 @color-bi-background-hover-ignore-button-theme-dark: @color-blue-10;
 @color-bi-background-active-ignore-button-theme-dark: @color-blue-10;
+
 @color-bi-text-success-button: @color-bi-text;
 @color-bi-background-success-button: @color-bi-background-success;
 @color-bi-border-success-button: @color-bi-border-success;
 @color-bi-text-success-clear-button: @color-bi-text-success;
 @color-bi-text-success-ghost-button: @color-bi-text-success;
+@color-bi-text-success-light-button: @color-bi-text-success;
+@color-bi-background-success-light-button: @color-bi-background-light-success;
+@color-bi-background-hover-success-light-button: @color-bi-background-light-success;
+@color-bi-background-active-success-light-button: @color-bi-background-light-success;
+
 @color-bi-text-warning-button: @color-bi-text;
+@color-bi-text-warning-light-button: @color-bi-text-redmark;
+@color-bi-background-warning-light-button: @color-bi-background-light-warning;
+@color-bi-background-hover-warning-light-button: @color-bi-background-light-warning;
+@color-bi-background-active-warning-light-button: @color-bi-background-light-warning;
+
 @color-bi-background-warning-button: @color-bi-background-warning;
 @color-bi-border-warning-button: @color-bi-border-warning;
 @color-bi-text-warning-clear-button: @color-bi-text-redmark;
 @color-bi-text-warning-ghost-button: @color-bi-text-redmark;
+
 @color-bi-text-error-button: @color-bi-text;
+@color-bi-background-error-light-button: @color-bi-background-light-failure;
 @color-bi-background-error-button: @color-bi-background-failure;
+@color-bi-text-error-light-button: @color-bi-text-failure;
+@color-bi-background-hover-error-light-button: @color-bi-background-light-failure;
+@color-bi-background-active-error-light-button: @color-bi-background-light-failure;
 @color-bi-border-error-button: @color-bi-border-failure;
 @color-bi-text-error-clear-button: @color-bi-text-failure;
 @color-bi-text-error-ghost-button: @color-bi-text-failure;