BI-41691 refactor: 视觉加一组深色边框线

src/base/single/input/checkbox/checkbox.js

@@ -24,7 +24,7 @@ BI.Checkbox = BI.inherit(BI.BasicButton, {
                 ref: function (_ref) {
                     self.checkbox = _ref;
                 },
-                cls: "checkbox-context bi-border",
+                cls: "checkbox-context bi-dark-border",
                 width: o.iconWidth - 2,
                 height: o.iconHeight - 2
             }]
@@ -50,9 +50,9 @@ BI.Checkbox = BI.inherit(BI.BasicButton, {
     setSelected: function (b) {
         BI.Checkbox.superclass.setSelected.apply(this, arguments);
         if (b) {
-            this.checkbox.element.removeClass("bi-border").addClass("bi-high-light-background bi-high-light-border");
+            this.checkbox.element.removeClass("bi-dark-border").addClass("bi-high-light-background bi-high-light-border");
         } else {
-            this.checkbox.element.removeClass("bi-high-light-background bi-high-light-border").addClass("bi-border");
+            this.checkbox.element.removeClass("bi-high-light-background bi-high-light-border").addClass("bi-dark-border");
         }
     }
 });

src/css/core/utils/common.css

@@ -174,6 +174,51 @@ textarea {
 .bi-border-left.disabled {
   border-color: #d0d4da !important;
 }
+.bi-dark-border {
+  border: 1px solid #9EA6B2;
+}
+.bi-dark-border.disabled {
+  border-color: #d0d4da !important;
+}
+.bi-dark-border-top {
+  border-top: 1px solid #9EA6B2;
+}
+.bi-dark-border-top.disabled {
+  border-color: #d0d4da !important;
+}
+.bi-dark-border-right {
+  border-right: 1px solid #9EA6B2;
+}
+.bi-dark-border-right.disabled {
+  border-color: #d0d4da !important;
+}
+.bi-dark-border-bottom {
+  border-bottom: 1px solid #9EA6B2;
+}
+.bi-dark-border-bottom.disabled {
+  border-color: #d0d4da !important;
+}
+.bi-dark-border-left {
+  border-left: 1px solid #9EA6B2;
+}
+.bi-dark-border-left.disabled {
+  border-color: #d0d4da !important;
+}
+.bi-theme-dark .bi-dark-border {
+  border: 1px solid #9EA6B2;
+}
+.bi-theme-dark .bi-dark-border-top {
+  border-top: 1px solid #9EA6B2;
+}
+.bi-theme-dark .bi-dark-border-right {
+  border-right: 1px solid #9EA6B2;
+}
+.bi-theme-dark .bi-dark-border-bottom {
+  border-bottom: 1px solid #9EA6B2;
+}
+.bi-theme-dark .bi-dark-border-left {
+  border-left: 1px solid #9EA6B2;
+}
 .bi-theme-dark .bi-border {
   border: 1px solid #3a3c53;
 }

src/less/core/utils/common.less

@@ -213,6 +213,64 @@ textarea {
   }
 }
 
+//深色边框
+.bi-dark-border {
+  border: 1px solid @color-bi-border-dark-line;
+  &.disabled {
+    border-color: @color-bi-border-disabled !important;
+  }
+}
+
+.bi-dark-border-top {
+  border-top: 1px solid @color-bi-border-dark-line;
+  &.disabled {
+    border-color: @color-bi-border-disabled !important;
+  }
+}
+
+.bi-dark-border-right {
+  border-right: 1px solid @color-bi-border-dark-line;
+  &.disabled {
+    border-color: @color-bi-border-disabled !important;
+  }
+}
+
+.bi-dark-border-bottom {
+  border-bottom: 1px solid @color-bi-border-dark-line;
+  &.disabled {
+    border-color: @color-bi-border-disabled !important;
+  }
+}
+
+.bi-dark-border-left {
+  border-left: 1px solid @color-bi-border-dark-line;
+  &.disabled {
+    border-color: @color-bi-border-disabled !important;
+  }
+}
+
+.bi-theme-dark {
+  .bi-dark-border {
+    border: 1px solid @color-bi-border-dark-line-theme-dark;
+  }
+
+  .bi-dark-border-top {
+    border-top: 1px solid @color-bi-border-dark-line-theme-dark;
+  }
+
+  .bi-dark-border-right {
+    border-right: 1px solid @color-bi-border-dark-line-theme-dark;
+  }
+
+  .bi-dark-border-bottom {
+    border-bottom: 1px solid @color-bi-border-dark-line-theme-dark;
+  }
+
+  .bi-dark-border-left {
+    border-left: 1px solid @color-bi-border-dark-line-theme-dark;
+  }
+}
+
 .bi-theme-dark {
   .bi-border {
     border: 1px solid @color-bi-border-line-theme-dark;

src/less/lib/colors.less

@@ -89,6 +89,10 @@
 @color-bi-border-line: @border-color-line;
 //深色系边框线色
 @color-bi-border-line-theme-dark: @border-color-line-theme-dark;
+//深色边框线
+@color-bi-border-dark-line: @border-color-dark-line;
+//深色系深色边框线
+@color-bi-border-dark-line-theme-dark: @border-color-dark-line-theme-dark;
 //灰化边框
 @color-bi-border-disabled: @border-color-disabled;
 //成功边框色

src/less/lib/constant.less

@@ -85,6 +85,8 @@
 @border-color-line-theme-dark: #3a3c53;
 @border-color-light-line: #f2f4f7;
 @border-color-light-line-theme-dark: #2F3149;
+@border-color-dark-line: #9EA6B2;
+@border-color-dark-line-theme-dark: #9EA6B2;
 @border-color-highlight: #3685f2;
 
 @border-color-warning: #fbb03b;