@kdcloudjs/kdesign 1.1.2 → 1.1.3

package/es/_utils/usePopper.js

@@ -123,7 +123,7 @@ function usePopper(locatorElement, popperElement, props) {
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'top' : _props$placement,
       _props$gap = props.gap,
-      defalutGap = _props$gap === void 0 ? 4 : _props$gap,
+      defaultGap = _props$gap === void 0 ? 4 : _props$gap,
       _props$scrollHidden = props.scrollHidden,
       scrollHidden = _props$scrollHidden === void 0 ? false : _props$scrollHidden,
       _props$mouseEnterDela = props.mouseEnterDelay,
@@ -172,7 +172,7 @@ function usePopper(locatorElement, popperElement, props) {
     top: 0,
     left: 0
   };
-  var gap = defalutGap + (arrow ? 10 : 0);
+  var gap = defaultGap + (arrow ? 10 : 0);
 
   var _useState = useState(initPos),
       _useState2 = _slicedToArray(_useState, 2),
@@ -434,8 +434,8 @@ function usePopper(locatorElement, popperElement, props) {
   };
   var popperNode = popperRef.current;
   var locatorNode = locatorRef.current;
-  useResizeObserver(popperNode, alignPopper);
-  useResizeObserver(locatorNode, alignPopper);
+  useResizeObserver(popperNode || document.body, alignPopper);
+  useResizeObserver(locatorNode || document.body, alignPopper);
   var showPopper = useCallback(function (evType) {
     if (!disabled) {
       !exist && setExist(true);

package/es/checkbox/checkbox.js

@@ -55,8 +55,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
     return selected ? false : indeterminate;
   };
 
-  var getDefaultClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(checkboxPrefixCls, "-")).call(_context, size), true && !!children), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, checkboxType), true), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, checkboxType, "-disabled"), disabled), _classNames));
-  var getSquareClassName = classNames(className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames2, _concatInstanceProperty(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, checkboxType), true), _defineProperty(_classNames2, _concatInstanceProperty(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, checkboxType, "-disabled"), disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, checkboxType, "-checked"), selected && !disabled), _classNames2));
+  var getDefaultClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(checkboxPrefixCls, "-")).call(_context, size), true && !!children), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, checkboxType), true), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, checkboxType, "-disabled"), disabled), _defineProperty(_classNames, "checked", selected), _classNames));
+  var getSquareClassName = classNames(className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(checkboxPrefixCls), true), _defineProperty(_classNames2, _concatInstanceProperty(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, checkboxType), true), _defineProperty(_classNames2, _concatInstanceProperty(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, checkboxType, "-disabled"), disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, checkboxType, "-checked"), selected && !disabled), _defineProperty(_classNames2, "checked", selected), _classNames2));
   var getRootClassName = isDefaultType() ? getDefaultClassName : getSquareClassName;
   var inputClassName = classNames(_defineProperty({}, "".concat(checkboxPrefixCls, "-input"), true));
   var checkedWrapperClassName = classNames((_classNames4 = {}, _defineProperty(_classNames4, _concatInstanceProperty(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, checkboxType, "-no-child"), !children), _defineProperty(_classNames4, _concatInstanceProperty(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, checkboxType, "-wrapper"), true), _defineProperty(_classNames4, _concatInstanceProperty(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, checkboxType, "-wrapper-size"), !!children), _defineProperty(_classNames4, _concatInstanceProperty(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, checkboxType, "-margin"), !!children), _defineProperty(_classNames4, _concatInstanceProperty(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, checkboxType, "-checked"), selected), _defineProperty(_classNames4, _concatInstanceProperty(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, checkboxType, "-indeterminate"), getIndeterminate()), _defineProperty(_classNames4, _concatInstanceProperty(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, checkboxType, "-disabled"), disabled && !selected), _defineProperty(_classNames4, _concatInstanceProperty(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, checkboxType, "-checked-disabled"), disabled && selected), _classNames4));
@@ -102,8 +102,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
         ref: ref,
         value: value,
         checked: selected,
-        disabled: disabled,
-        name: name
+        disabled: disabled
       })), children && /*#__PURE__*/React.createElement("span", {
         className: "".concat(checkboxPrefixCls, "-children")
       }, children), !isDefaultType() && /*#__PURE__*/React.createElement("span", {

package/es/checkbox/style/index.css

@@ -120,24 +120,17 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   font-size: var(--kd-c-checkbox-font-size, var(--kd-g-font-size-small, 12px));
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
-  height: var(--kd-c-checkbox-sizing-height-middle, 36px);
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+  line-height: 18px;
 }
 .kd-checkbox-no-child {
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
-  width: var(--kd-c-checkbox-default-input-sizing-width, 16px);
-}
-.kd-checkbox-small {
-  height: var(--kd-c-checkbox-sizing-height-small, 32px);
-}
-.kd-checkbox-middle {
-  height: var(--kd-c-checkbox-sizing-height-middle, 36px);
-}
-.kd-checkbox-large {
-  height: var(--kd-c-checkbox-sizing-height-large, 40px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
+  width: var(--kd-c-checkbox-default-input-sizing-width, 14px);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .kd-checkbox-group > *:not(:last-child) {
-  margin-right: var(--kd-c-checkbox-group-spacing-margin-right, 8px);
+  margin-right: var(--kd-c-checkbox-group-spacing-margin-right, 12px);
 }
 .kd-checkbox-input {
   margin: 0;
@@ -165,8 +158,8 @@
 }
 .kd-checkbox-square {
   border-radius: 2px;
-  border: 1px solid var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  padding: var(--kd-c-checkbox-square-spacing-padding, 0 20px);
+  border: 1px solid var(--kd-c-checkbox-color-border, #d9d9d9);
+  padding: var(--kd-c-checkbox-square-spacing-padding-horizontal, 7px) var(--kd-c-checkbox-square-spacing-padding-vertical, 12px);
   -webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
   transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
 }
@@ -234,12 +227,13 @@
           animation: kdZoomLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-square-triangle-disabled {
-  border-bottom-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  border-bottom-color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-checkbox-square-disabled,
 .kd-checkbox-square-disabled:hover {
-  border-color: var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  border-color: var(--kd-c-checkbox-color-border, #d9d9d9);
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   cursor: not-allowed !important;
 }
 .kd-checkbox-square-checked {
@@ -258,20 +252,23 @@
           animation: kdZoomEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-square-checked-disabled {
-  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
   cursor: not-allowed !important;
 }
 .kd-checkbox-square-wrapper {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
   width: 0;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   opacity: 0;
 }
+.kd-checkbox-square.checked .kd-checkbox-children {
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+}
 .kd-checkbox-default {
   border: none;
   padding: var(--kd-c-checkbox-default-spacing-padding, 0);
@@ -287,8 +284,8 @@
 .kd-checkbox-default-disabled,
 .kd-checkbox-default-disabled:hover,
 .kd-checkbox-default-disabled:hover .kd-checkbox-default-wrapper {
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
-  border-color: var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  border-color: var(--kd-c-checkbox-color-border, #d9d9d9);
   cursor: not-allowed !important;
 }
 .kd-checkbox-default-wrapper {
@@ -297,7 +294,7 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   background-color: var(--kd-c-checkbox-color-background, var(--kd-g-color-background, #fff));
-  border: var(--kd-c-checkbox-default-input-border-width, 1px) solid var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border: var(--kd-c-checkbox-default-input-border-width, 1px) solid var(--kd-c-checkbox-color-border, #d9d9d9);
   border-radius: var(--kd-c-checkbox-default-input-radius-border, 2px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -317,21 +314,24 @@
           box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-checkbox-default-wrapper-size {
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
-  width: var(--kd-c-checkbox-default-input-sizing-width, 16px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
+  width: var(--kd-c-checkbox-default-input-sizing-width, 14px);
 }
 .kd-checkbox-default-margin {
-  margin-right: var(--kd-c-checkbox-default-input-spacing-margin-right, 8px);
+  margin-right: var(--kd-c-checkbox-default-input-spacing-margin-right, 4px);
 }
 .kd-checkbox-default-no-child {
   height: 100%;
   width: 100%;
 }
 .kd-checkbox-default-checked-disabled {
-  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  background-color: var(--kd-c-checkbox-default-color-background-disabled, #e5e5e5) !important;
+  border-color: var(--kd-c-checkbox-default-color-background-disabled, #d9d9d9) !important;
   cursor: not-allowed !important;
 }
+.kd-checkbox-default-checked-disabled .kd-checkbox-default-inner {
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
 .kd-checkbox-default-checked {
   background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
   border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
@@ -349,7 +349,7 @@
 .kd-checkbox-default-inner {
   position: absolute;
   color: var(--kd-c-checkbox-default-input-icon-color, #fff);
-  font-size: var(--kd-c-checkbox-default-input-icon-font-size, 14px);
+  font-size: var(--kd-c-checkbox-default-input-icon-font-size, 12px);
   height: 100%;
   width: 100%;
   top: 5%;
@@ -371,8 +371,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 8px;
-  height: 8px;
+  width: var(--kd-c-checkbox-default-indeterminate-sizing-square, 6px);
+  height: var(--kd-c-checkbox-default-indeterminate-sizing-square, 6px);
   background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
   border: 0;
   -webkit-transform: translate(-50%, -50%) scale(1);
@@ -380,3 +380,6 @@
   opacity: 1;
   content: " ";
 }
+.kd-checkbox-default.checked .kd-checkbox-children {
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+}

package/es/checkbox/style/index.less

@@ -16,19 +16,11 @@
   box-sizing: border-box;
   font-size: @checkbox-font-size;
   color: @checkbox-font-color;
-  height: @checkbox-middle-size-height;
+  line-height: 18px;
   &-no-child {
     height: @checkbox-default-input-height;
     width: @checkbox-default-input-width;
-  }
-  &-small {
-    height: @checkbox-small-size-height;
-  }
-  &-middle {
-    height: @checkbox-middle-size-height;
-  }
-  &-large {
-    height: @checkbox-large-size-height;
+    box-sizing: border-box;
   }
   &-group > *:not(:last-child) {
     margin-right: @checkbox-group-margin-right;
@@ -56,7 +48,7 @@
 .@{checkbox-prefix-cls}-square {
   border-radius: 2px;
   border: 1px solid @checkbox-border-color;
-  padding: @checkbox-square-padding;
+  padding: @checkbox-square-padding-horizontal @checkbox-square-padding-vertical;
   transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
   &:not(&-disabled)::after {
     content: '';
@@ -111,13 +103,14 @@
     animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
   }
   &-triangle-disabled {
-    border-bottom-color: @checkbox-disabled-bg-color;
+    border-bottom-color: @checkbox-disabled-text-color;
   }
 
   &-disabled,
   &-disabled:hover {
     border-color: @checkbox-border-color;
-    color: @checkbox-font-color;
+    color: @checkbox-disabled-text-color;
+    background-color: @checkbox-disabled-bg-color;
     cursor: not-allowed !important;
   }
   &-checked {
@@ -145,6 +138,11 @@
     box-sizing: border-box;
     opacity: 0;
   }
+  &.checked {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }
 
 .@{checkbox-prefix-cls}-default {
@@ -160,7 +158,7 @@
   &-disabled,
   &-disabled:hover,
   &-disabled:hover &-wrapper {
-    color: @checkbox-font-color;
+    color: @checkbox-disabled-text-color;
     border-color: @checkbox-border-color;
     cursor: not-allowed !important;
   }
@@ -198,9 +196,13 @@
     width: 100%;
   }
   &-checked-disabled {
-    background-color: @checkbox-disabled-bg-color !important;
-    border-color: @checkbox-disabled-bg-color !important;
+    background-color: @checkbox-default-disabled-color-bg !important;
+    border-color: @checkbox-default-disabled-color-border !important;
     cursor: not-allowed !important;
+
+    .@{checkbox-prefix-cls}-default-inner {
+      color: @checkbox-disabled-text-color;
+    }
   }
   &-checked {
     background-color: @checkbox-checked-border-color;
@@ -234,12 +236,17 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 8px;
-    height: 8px;
+    width: @checkbox-default-indeterminate-square;
+    height: @checkbox-default-indeterminate-square;
     background-color: @checkbox-checked-border-color;
     border: 0;
     transform: translate(-50%,-50%) scale(1);
     opacity: 1;
     content: " ";
   }
+  &.checked {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }

package/es/checkbox/style/token.less

@@ -2,47 +2,46 @@
 
 @checkbox-prefix: '--@{kd-prefix}-c-checkbox';
 
-// font-size
-@checkbox-font-size: var(~'@{checkbox-prefix}-font-size', @font-size-small); //默认字体大小
-@checkbox-default-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 14px); // 勾选输入框勾勾图标大小
-@checkbox-square-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 边框类型三角内勾选输入框勾勾图标大小
-
 // colors
 @checkbox-color-theme: var(~'@{checkbox-prefix}-color-theme', @color-theme);
-@checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', @color-text-primary);
-@checkbox-border-color: var(~'@{checkbox-prefix}-color-border', @color-border-strong);
-@checkbox-checked-border-color: var(~'@{checkbox-prefix}-color-border-active',  @color-theme);
-@checkbox-checked-font-color: var(~'@{checkbox-prefix}-color-text-hover',  @color-theme);
-@checkbox-default-input-icon-color: var(~'@{checkbox-prefix}-default-input-icon-color',  #fff); // 勾选输入框边勾勾图标颜色
-@checkbox-square-input-icon-color: var(~'@{checkbox-prefix}-square-input-icon-color',  #fff); // 边框类型三角内勾选输入框勾勾图标颜色
-@checkbox-bg-color: var(~'@{checkbox-prefix}-color-background',  @color-background);
-@checkbox-disabled-bg-color: var(~'@{checkbox-prefix}-color-background-disabled',  @color-disabled);
-
-// sizing
-@checkbox-small-size-height: var(~'@{checkbox-prefix}-sizing-height-small',  32px); // 小尺寸复选框
-@checkbox-middle-size-height: var(~'@{checkbox-prefix}-sizing-height-middle',  36px); // 中尺寸复选框
-@checkbox-large-size-height: var(~'@{checkbox-prefix}-sizing-height-large',  40px); // 大尺寸复选框
+@checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', #212121);
+@checkbox-border-color: var(~'@{checkbox-prefix}-color-border', #d9d9d9);
+@checkbox-checked-border-color: var(~'@{checkbox-prefix}-color-border-active', @color-theme);
+@checkbox-checked-font-color: var(~'@{checkbox-prefix}-color-text-hover', @color-theme);
+@checkbox-default-input-icon-color: var(~'@{checkbox-prefix}-default-input-icon-color', #fff); // 勾选输入框边勾勾图标颜色
+@checkbox-square-input-icon-color: var(~'@{checkbox-prefix}-square-input-icon-color', #fff); // 边框类型三角内勾选输入框勾勾图标颜色
+@checkbox-bg-color: var(~'@{checkbox-prefix}-color-background', @color-background);
+@checkbox-disabled-bg-color: var(~'@{checkbox-prefix}-color-background-disabled', @color-background-contain-disabled);
+@checkbox-disabled-border-color: var(~'@{checkbox-prefix}-color-border-disabled', @color-border-disabled);
+@checkbox-disabled-text-color: var(~'@{checkbox-prefix}-color-text-disabled', @color-disabled);
+@checkbox-default-disabled-color-bg: var(~'@{checkbox-prefix}-default-color-background-disabled', #e5e5e5);
+@checkbox-default-disabled-color-border: var(~'@{checkbox-prefix}-default-color-background-disabled', #d9d9d9);
+
+// font
+@checkbox-font-size: var(~'@{checkbox-prefix}-font-size', @font-size-small); //默认字体大小
+@checkbox-default-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 勾选输入框勾勾图标大小
+@checkbox-square-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 边框类型三角内勾选输入框勾勾图标大小
 
-// @checkbox-border-width: 1px; // 边框类型边框大小
-@checkbox-border-width: var(~'@{checkbox-prefix}-border-width',  1px); // 边框类型边框大小
+// motion
+@checkbox-transition-duration: var(~'@{checkbox-prefix}-motion-duration', @duration-promptly);
 
-@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height',  16px); // 勾选输入框高度
-@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width',  16px); // 勾选输入框宽度
+// radius
+@checkbox-default-input-border-radius: var(~'@{checkbox-prefix}-default-input-radius-border', 2px); // 勾选输入框圆角
 
-// @checkbox-default-input-border-width: 1px; // 勾选输入框边框大小
-@checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width',  1px); // 勾选输入框边框大小 不需要
+// sizing
+@checkbox-border-width: var(~'@{checkbox-prefix}-border-width', 1px); // 边框类型边框大小
+@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height', 14px); // 勾选输入框高度
+@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width', 14px); // 勾选输入框宽度
+@checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width', 1px); // 勾选输入框边框大小 不需要
+@checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height', 18px); // 边框类型右下角三角高度
+@checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width', 18px); // 边框类型右下角三角宽度
+@checkbox-default-indeterminate-square: var(~'@{checkbox-prefix}-default-indeterminate-sizing-square', 6px); // 半选框的大小
 
-@checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height',  18px); // 边框类型右下角三角高度
-@checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width',  18px); // 边框类型右下角三角宽度
 
 // spacing
-@checkbox-group-margin-right: var(~'@{checkbox-prefix}-group-spacing-margin-right',  8px); // 按钮组的间距
-@checkbox-default-padding: var(~'@{checkbox-prefix}-default-spacing-padding',  0); // 默认类型复选框内边距
-@checkbox-default-input-margin-right: var(~'@{checkbox-prefix}-default-input-spacing-margin-right',  8px); // 勾选输入框与右侧内容间距
-@checkbox-square-padding: var(~'@{checkbox-prefix}-square-spacing-padding',  0 20px); // 边框类型内边距
+@checkbox-group-margin-right: var(~'@{checkbox-prefix}-group-spacing-margin-right', 12px); // 按钮组的间距
+@checkbox-default-padding: var(~'@{checkbox-prefix}-default-spacing-padding', 0); // 默认类型复选框内边距
+@checkbox-default-input-margin-right: var(~'@{checkbox-prefix}-default-input-spacing-margin-right', 4px); // 勾选输入框与右侧内容间距
+@checkbox-square-padding-horizontal: var(~'@{checkbox-prefix}-square-spacing-padding-horizontal', 7px); // 边框类型内边距
+@checkbox-square-padding-vertical: var(~'@{checkbox-prefix}-square-spacing-padding-vertical', 12px); // 边框类型内边距
 
-// radius
-@checkbox-default-input-border-radius: var(~'@{checkbox-prefix}-default-input-radius-border',  2px); // 勾选输入框圆角
-
-// motion
-@checkbox-transition-duration: var(~'@{checkbox-prefix}-motion-duration', @duration-promptly);