From 664bc9b6f6773796c94cea154656830384c165be Mon Sep 17 00:00:00 2001
From: treecat <treecat@fanruan.com>
Date: Wed, 1 Jun 2022 14:44:20 +0800
Subject: [PATCH] =?UTF-8?q?DESIGN-4069=20feat:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=B8=80=E5=A5=97=E6=B5=85=E8=89=B2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/js/base/button/demo.button.js       | 31 ++++++++++++
 src/base/single/button/buttons/button.js | 12 +++--
 src/less/base/single/button/button.less  | 64 ++++++++++++++++++++++++
 src/less/lib/colors.less                 |  4 ++
 src/less/lib/theme.less                  | 22 ++++++++
 5 files changed, 129 insertions(+), 4 deletions(-)

diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js
index 195fe06e2..45860ff70 100644
--- a/demo/js/base/button/demo.button.js
+++ b/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 () {
diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js
index 7c3f4c186..1eb9c0f22 100644
--- a/src/base/single/button/buttons/button.js
+++ b/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");
             }
         },
 
diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less
index e34c4f5f0..6faa28452 100644
--- a/src/less/base/single/button/button.less
+++ b/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;
diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less
index 060768c03..dca2a9989 100644
--- a/src/less/lib/colors.less
+++ b/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;
diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less
index 3c85b8031..87d578943 100644
--- a/src/less/lib/theme.less
+++ b/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;