@aloudata/aloudata-design 1.10.14 → 2.0.0-beta.10

package/dist/Button/style/variables.less

@@ -5,65 +5,253 @@
 /** size控制 **/
 @button-height-large: 36px;
 @button-text-size-large: 16px;
-@button-border-radius-large: 4px;
-@button-border-padding-large: 5px 15px;
-@button-left-icon-margin-right-large: 8px;
-@button-text-min-width-large: 96px;
+@button-border-radius-large: var(--alias-radius-100, 8px);
+@button-padding-large: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@button-line-height-large: 24px;
+@button-gap-large: 8px;
+@button-text-min-width-large: 56px;
 
 @button-height-middle: 32px;
-@button-text-size-middle: 13px;
-@button-border-radius-middle: 2px;
-@button-border-padding-middle: 5px 11px;
-@button-left-icon-margin-right-middle: 4px;
-@button-text-min-width-middle: 76px;
+@button-text-size-middle: 14px;
+@button-border-radius-middle: var(--alias-radius-75, 6px);
+@button-padding-middle: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@button-line-height-middle: 20px;
+@button-gap-middle: 4px;
+@button-text-min-width-middle: 52px;
 
 @button-height-small: 28px;
 @button-text-size-small: 12px;
-@button-border-radius-small: 2px;
-@button-border-padding-small: 5px 7px;
-@button-left-icon-margin-right-small: 4px;
-@button-text-min-width-small: 64px;
+@button-border-radius-small: var(--alias-radius-50, 4px);
+@button-padding-small: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@button-line-height-small: 16px;
+@button-gap-small: var(--alias-radius-50, 4px);
+@button-text-min-width-small: 48px;
 
 // @button-height-mini: 24px;
 // @button-text-size-mini: 12px;
 // @button-border-radius-mini: 4px;
-// @button-border-padding-mini: 0 7px;
-// @button-left-icon-margin-right-mini: 4px;
+// @button-padding-mini: 0 7px;
+// @button-gap-mini: 4px;
 
-/****  type控制  ****/
-@button-primary-bg-color: @B40;
-@button-primary-bg-color-active: @B30;
-@button-primary-bg-color-disable: @B40;
-@button-primary-color: @ND0;
-@button-primary-color-active: @ND0;
-@button-primary-color-disable: @ND0;
+/****  primary按钮  ****/
+// bg color
+@button-primary-bg-color: var(
+  --alias-colors-bg-accent-blue-stronger-default,
+  #126fdd
+);
+@button-primary-bg-color-hover: var(
+  --alias-colors-bg-accent-blue-stronger-hover,
+  #0f59b1
+);
+@button-primary-bg-color-active: var(
+  --alias-colors-bg-accent-blue-stronger-press,
+  #0b4385
+);
+@button-primary-bg-color-disable: var(
+  --alias-colors-bg-disabled,
+  rgba(0, 0, 0, 0.05)
+);
+// text color
+@button-primary-color: var(--alias-colors-text-inverse-strong, #fff);
+@button-primary-color-hover: var(--alias-colors-text-inverse-strong, #fff);
+@button-primary-color-active: var(--alias-colors-text-inverse-strong, #fff);
+@button-primary-color-disable: var(
+  --alias-colors-text-disabled,
+  rgba(0, 0, 0, 0.25)
+);
+// border color
+@button-primary-border-color: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-primary-border-color-hover: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-primary-border-color-active: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-primary-border-color-disable: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
 
-@button-dangerous-bg-color: @SC40;
-@button-dangerous-bg-color-active: @SC30;
-@button-dangerous-bg-color-disable: @SC40;
-@button-dangerous-color: @ND0;
-@button-dangerous-color-active: @ND0;
-@button-dangerous-color-disable: @ND0;
+/*********** secondary按钮 ***********/
+// bg color
+@button-secondary-bg-color: var(
+  --alias-colors-bg-accent-gray-subtler-default,
+  #f9fafb
+);
+@button-secondary-bg-color-hover: var(
+  --alias-colors-bg-accent-gray-subtler-default,
+  #f9fafb
+);
+@button-secondary-bg-color-active: var(
+  --alias-colors-bg-accent-gray-subtler-press,
+  #e5e7eb
+);
+@button-secondary-bg-color-disable: var(
+  --alias-colors-bg-disabled,
+  rgba(0, 0, 0, 0.05)
+);
+// text color
+@button-secondary-color: var(--alias-colors-text-default, #1f2937);
+@button-secondary-color-hover: var(--alias-colors-text-default, #1f2937);
+@button-secondary-color-active: var(--alias-colors-text-default, #1f2937);
+@button-secondary-color-disable: var(
+  --alias-colors-text-disabled,
+  rgba(0, 0, 0, 0.25)
+);
+// border color
+@button-secondary-border-color: var(
+  --alias-colors-border-accent-gray-subtle-default,
+  #d1d5db
+);
+@button-secondary-border-color-hover: var(
+  --alias-colors-border-accent-gray-subtle-hover,
+  #9ca3af
+);
+@button-secondary-border-color-active: var(
+  --alias-colors-border-accent-gray-subtle-default,
+  #d1d5db
+);
+@button-secondary-border-color-disable: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
 
-@button-secondary-bg-color: @BG100;
-@button-secondary-bg-color-active: @BG90;
-@button-secondary-bg-color-disable: @BG100;
-@button-secondary-color: @NL20;
-@button-secondary-color-active: @NL20;
-@button-secondary-color-disable: @NL20;
-@button-secondary-border-color: @BG60;
-@button-secondary-border-color-active: @BG60;
+/*********** danger按钮 ***********/
+// bg color
+@button-dangerous-bg-color: var(
+  --alias-colors-bg-accent-red-stronger-default,
+  #dc2626
+);
+@button-dangerous-bg-color-hover: var(
+  --alias-colors-bg-accent-red-stronger-hover,
+  #b91c1c
+);
+@button-dangerous-bg-color-active: var(
+  --alias-colors-bg-accent-red-stronger-press,
+  #991b1b
+);
+@button-dangerous-bg-color-disable: var(
+  --alias-colors-bg-disabled,
+  rgba(0, 0, 0, 0.05)
+);
+// text color
+@button-dangerous-color: var(--alias-colors-text-inverse-strong, #fff);
+@button-dangerous-color-hover: var(--alias-colors-text-inverse-strong, #fff);
+@button-dangerous-color-active: var(--alias-colors-text-inverse-strong, #fff);
+@button-dangerous-color-disable: var(
+  --alias-colors-text-disabled,
+  rgba(0, 0, 0, 0.25)
+);
+// border color
+@button-dangerous-border-color: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-dangerous-border-color-hover: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-dangerous-border-color-active: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-dangerous-border-color-disable: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
 
-@button-text-bg-color: transparent;
-@button-text-bg-color-active: @NL90;
-@button-text-bg-color-disable: transparent;
-@button-text-color: @NL20;
-@button-text-color-active: @NL20;
-@button-text-color-disable: @NL20;
+/*********** text按钮 ***********/
+// bg color
+@button-text-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+@button-text-bg-color-hover: var(
+  --alias-colors-bg-accent-blue-subtler-hover,
+  #d4e7fd
+);
+@button-text-bg-color-active: var(
+  --alias-colors-bg-brand-subtlest-press,
+  #a9cffb
+);
+@button-text-bg-color-disable: var(--alias-colors-bg-skeleton-subtler, #fff);
+// text color
+@button-text-color: var(--alias-colors-text-default, #1f2937);
+@button-text-color-hover: var(--alias-colors-text-brand, #126fdd);
+@button-text-color-active: var(--alias-colors-text-brand, #126fdd);
+@button-text-color-disable: var(
+  --alias-colors-text-disabled,
+  rgba(0, 0, 0, 0.25)
+);
+// border color
+@button-text-border-color: var(--alias-colors-border-transp, rgba(0, 0, 0, 0));
+@button-text-border-color-hover: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-text-border-color-active: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-text-border-color-disable: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
 
-@button-link-bg-color: transparent;
-@button-link-bg-color-active: transparent;
-@button-link-bg-color-disable: transparent;
-@button-link-color: @B30;
-@button-link-color-active: @B20;
-@button-link-color-disable: @B30;
+/*********** inverse按钮 ***********/
+// bg color
+@button-inverse-bg-color: var(
+  --component-button-background-secondary-inverse-default,
+  rgba(255, 255, 255, 0.1)
+);
+@button-inverse-bg-color-hover: var(
+  --alias-colors-bg-skeleton-inverse-stronger,
+  rgba(255, 255, 255, 0.15)
+);
+@button-inverse-bg-color-active: var(
+  --alias-colors-bg-skeleton-inverse-strongest,
+  rgba(255, 255, 255, 0.25)
+);
+@button-inverse-bg-color-disable: var(
+  --alias-colors-bg-inverse-disabled,
+  rgba(255, 255, 255, 0.1)
+);
+// text color
+@button-inverse-color: var(
+  --alias-colors-text-inverse-default,
+  rgba(255, 255, 255, 0.9)
+);
+@button-inverse-color-hover: var(
+  --alias-colors-text-inverse-default,
+  rgba(255, 255, 255, 0.9)
+);
+@button-inverse-color-active: var(
+  --alias-colors-text-inverse-default,
+  rgba(255, 255, 255, 0.9)
+);
+@button-inverse-color-disable: var(
+  --alias-colors-text-inverse-disabled,
+  rgba(255, 255, 255, 0.25)
+);
+// border color
+@button-inverse-border-color: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-inverse-border-color-hover: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-inverse-border-color-active: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);
+@button-inverse-border-color-disable: var(
+  --alias-colors-border-transp,
+  rgba(0, 0, 0, 0)
+);

package/dist/Checkbox/index.js

@@ -1,5 +1,5 @@
-var _excluded = ["className", "disabled"],
-  _excluded2 = ["className", "disabled"];
+var _excluded = ["className", "disabled", "size"],
+  _excluded2 = ["className", "disabled", "size"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -11,22 +11,28 @@ import CheckboxGroup from "./component/CheckboxGroup";
 function Checkbox(props) {
   var className = props.className,
     customDisabled = props.disabled,
+    size = props.size,
     otherProps = _objectWithoutProperties(props, _excluded);
   var disabled = React.useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   return /*#__PURE__*/React.createElement(AntdCheckbox, _extends({
-    className: classNames('ald-checkbox', className),
+    className: classNames('ald-checkbox', className, {
+      'ald-checkbox-small': size === 'small'
+    }),
     disabled: mergedDisabled
   }, otherProps));
 }
 Checkbox.Group = function Group(props) {
   var className = props.className,
     customDisabled = props.disabled,
+    size = props.size,
     otherProps = _objectWithoutProperties(props, _excluded2);
   var disabled = React.useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   return /*#__PURE__*/React.createElement(CheckboxGroup, _extends({
-    className: classNames('ald-checkbox-group', className),
+    className: classNames('ald-checkbox-group', className, {
+      'ald-checkbox-group-small': size === 'small'
+    }),
     disabled: mergedDisabled
   }, otherProps));
 };

package/dist/Checkbox/style/index.less

@@ -1,26 +1,39 @@
 @import '../../style/index.less';
 
-// v3.2的设计稿中所有复选框的边框都是如此，所以此处写死，后续如若需要修改请移除
-.ant-checkbox-inner {
-  border: 1px solid #dbdbdb !important;
-  background-color: #fff !important;
-  transform: scale(0.875);
-}
-// 此处同理
-.ant-checkbox::after,
-.ant-checkbox-checked::after {
-  border: 1px solid #dbdbdb !important;
-}
-
-.ant-checkbox-checked {
-  .ant-checkbox-inner {
-    background-color: #f8f8f8 !important;
-  }
-
-  &::after {
-    background-color: #f8f8f8 !important;
-  }
-}
+@checkbox-border-color-normal: var(
+  --alias-colors-border-accent-gray-subtle-default
+);
+@checkbox-border-color-hover: var(
+  --alias-colors-border-accent-gray-subtle-hover
+);
+@checkbox-border-color-active: var(
+  --alias-colors-border-accent-gray-subtle-default
+);
+@checkbox-border-color-disabled: var(--alias-colors-border-disabled);
+
+@checkbox-inner-bgc-normal: var(--alias-colors-bg-skeleton-subtler);
+@checkbox-inner-bgc-hover: var(--alias-colors-bg-skeleton-subtler);
+@checkbox-inner-bgc-active: var(--alias-colors-bg-skeleton-strong);
+@checkbox-inner-bgc-disabled: var(--alias-colors-border-disabled);
+
+@checkbox-checked-inner-bgc-normal: var(
+  --alias-colors-bg-selected-strong-default,
+  #126fdd
+);
+@checkbox-checked-inner-bgc-hover: var(
+  --alias-colors-bg-selected-strong-hover,
+  #0f59b1
+);
+@checkbox-checked-inner-bgc-active: var(
+  --alias-colors-bg-selected-strong-press,
+  #0b4385
+);
+@checkbox-checked-inner-bgc-disabled: var(
+  --alias-colors-bg-disabled,
+  rgba(0, 0, 0, 0.05)
+);
+
+@checkout-border-radius: var(--alias-radius-25);
 
 .ald-checkout-group-vertical {
   display: flex;
@@ -52,72 +65,113 @@
     .ant-checkbox-input {
       margin: 0;
     }
+
+    &:hover {
+      & .ant-checkbox-checked,
+      & .ant-checkbox-indeterminate {
+        .ant-checkbox-inner[class] {
+          background-color: @checkbox-checked-inner-bgc-hover;
+        }
+      }
+
+      .ant-checkbox-inner[class] {
+        background-color: @checkbox-inner-bgc-hover;
+        border-color: @checkbox-border-color-hover;
+      }
+
+      .ant-checkbox-checked.ant-checkbox-disabled {
+        .ant-checkbox-inner[class][class] {
+          background: @checkbox-checked-inner-bgc-disabled;
+        }
+      }
+
+      .ant-checkbox-disabled {
+        .ant-checkbox-inner[class][class] {
+          background: @checkbox-inner-bgc-disabled;
+        }
+      }
+    }
+
+    &:active {
+      & .ant-checkbox-checked,
+      & .ant-checkbox-indeterminate {
+        .ant-checkbox-inner[class] {
+          background-color: @checkbox-checked-inner-bgc-active;
+        }
+      }
+
+      .ant-checkbox-inner[class] {
+        background-color: @checkbox-inner-bgc-active;
+        border-color: @checkbox-border-color-active;
+      }
+    }
+
+    .ant-checkbox-checked.ant-checkbox-disabled {
+      .ant-checkbox-inner[class][class] {
+        background: @checkbox-checked-inner-bgc-disabled;
+      }
+    }
+
+    .ant-checkbox-disabled {
+      .ant-checkbox-inner[class][class] {
+        background: @checkbox-inner-bgc-disabled;
+      }
+    }
   }
 
   .ant-checkbox-inner {
     width: 16px;
     height: 16px;
-    background-color: @BG100;
-    border-color: @NL60;
+    background-color: @checkbox-inner-bgc-normal;
+    border-color: @checkbox-border-color-normal;
     border-radius: 2px;
   }
 
   .ant-checkbox-checked {
     &::after,
     .ant-checkbox-inner {
-      background-color: @B95;
-      border-color: @B40;
+      border: 0;
+      background-color: @checkbox-checked-inner-bgc-normal;
       border-radius: 2px;
     }
 
     .ant-checkbox-inner {
-      background-color: @B95;
-      border-color: @B40;
+      background-color: @checkbox-checked-inner-bgc-normal;
 
       &::after {
-        // top: 3px;
-        // left: 2px;
+        top: 4px;
+        left: 3px;
         z-index: 10;
-        // width: 10px;
-        // background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADLSURBVHgBrdTPDcIgFAZwHo3O0RF6MdGbjuAI3aCjuAGj6E3jyRGYQwPIR2rT1mfDH79Lyct7vxRIIPGHbLtr/aJKrZxpb6edRk2KwgB9kjw74fb4brp7Uwx/UL+s+1JtyakimEERbZw9YkEiI79Q6+zh0Z9xMhyDDjB3qyVogGfNeu2bODwFRST+dNQchoGUoAE2fvtoGtUmeA6KhDNu/LBkhmUlW2usSkUHeAGfJwqdwBF4NPoFL+BJKAszeDKKsG8FEGAk6JKDIm/pQrazK2zB6QAAAABJRU5ErkJggg==')
-        //   no-repeat;
-        // background-size: 100%, 100%;
-        // border-width: 0;
-        // transform: none;
-        position: absolute;
-        // top: 0;
-        // left: 0;
-        // width: 100%;
-        // height: 100%;
-        border: 2px solid #3271c9;
-        border-top: 0;
-        border-left: 0;
-        transform: rotate(45deg) scale(1) translate(-50%, -50%);
-        opacity: 1;
-        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+        width: 10px;
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==')
+          no-repeat;
+        background-size: 100%, 100%;
+        border-width: 0;
+        transform: none;
       }
     }
   }
 
   .ant-checkbox-disabled {
     cursor: default;
-    opacity: 0.5;
 
     & + span {
       color: @NL0;
       cursor: default;
-      opacity: 0.5;
     }
 
     .ant-checkbox-inner {
+      background-color: @checkbox-inner-bgc-disabled;
+
       &::after {
-        top: 3px;
-        left: 2px;
+        top: 4px;
+        left: 3px;
         z-index: 10;
         width: 10px;
         height: 8px;
         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADLSURBVHgBrdTPDcIgFAZwHo3O0RF6MdGbjuAI3aCjuAGj6E3jyRGYQwPIR2rT1mfDH79Lyct7vxRIIPGHbLtr/aJKrZxpb6edRk2KwgB9kjw74fb4brp7Uwx/UL+s+1JtyakimEERbZw9YkEiI79Q6+zh0Z9xMhyDDjB3qyVogGfNeu2bODwFRST+dNQchoGUoAE2fvtoGtUmeA6KhDNu/LBkhmUlW2usSkUHeAGfJwqdwBF4NPoFL+BJKAszeDKKsG8FEGAk6JKDIm/pQrazK2zB6QAAAABJRU5ErkJggg==')
+        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8L3N2Zz4K')
           no-repeat;
         background-size: 100%, 100%;
         border-width: 0;
@@ -128,13 +182,14 @@
 
   .ant-checkbox-indeterminate {
     .ant-checkbox-inner {
-      background-color: @B95;
-      border-color: @B40;
+      background-color: @checkbox-checked-inner-bgc-normal;
+      border: 0;
 
       &::after {
         width: 10px;
         height: 2px;
-        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAiSURBVHgBzcwxAQAACAIwNJLNjEkqKMHBAmzuKQQtwvpDAw6CAnPPhHsoAAAAAElFTkSuQmCC');
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
         background-size: 100%, 100%;
         background-color: @ND0;
         border-radius: 2px;
@@ -146,59 +201,20 @@
     display: flex;
     align-items: center;
     padding-right: 12px;
-    padding-left: 4px;
-    font-size: 13px;
+    padding-left: 6px;
+    font-size: 14px;
   }
 
-  &:hover .ant-checkbox-inner[class][class] {
-    border-color: #dbdbdb;
-  }
-
-  &.ant-checkbox-checked.ant-checkbox-disabled .ant-checkbox-inner {
-    background: @B95;
-    border: 1px solid @B60;
-    border-radius: 2px;
-  }
-
-  & .ant-checkbox-checked.ant-checkbox-disabled {
-    &:hover .ant-checkbox-inner[class][class] {
-      border-color: @B40;
+  &.ald-checkbox-small {
+    .ant-checkbox + span {
+      font-size: 12px;
     }
   }
-
-  .ant-checkbox:hover .ant-checkbox-inner {
-    border-color: @B40;
-    // box-shadow: @shadow-primary;
-    box-shadow: none;
-    background-color: none;
-  }
 }
 
-.ant-checkbox-wrapper
-  .ald-checkbox.ant-checkbox-disabled[class]
-  .ant-checkbox-inner:hover {
-  box-shadow: unset;
-  background-color: none;
-  border-radius: 2px;
-}
-
-.ant-checkbox-wrapper.ald-checkbox
-  .ant-checkbox-disabled.ant-checkbox:hover
-  .ant-checkbox-inner {
-  box-shadow: unset;
-  background-color: none;
-  border: 1px solid @BG60;
-}
-
-.ant-checkbox-group.ald-checkbox,
-.ant-checkbox-wrapper.ald-checkbox {
-  .ant-checkbox-input:focus + .ant-checkbox-inner {
-    border-color: @B40;
-  }
-
-  .ant-checkbox:hover .ant-checkbox-inner {
-    border-color: @B40;
-    background-color: none;
+.ald-checkbox-group-small {
+  .ant-checkbox.ant-checkbox + span {
+    font-size: 12px;
   }
 }
 
@@ -206,13 +222,6 @@
   cursor: default;
 }
 
-.ant-checkbox-wrapper[class]:hover .ant-checkbox::after {
-  visibility: hidden;
-}
-
-.ant-checkbox-checked:hover .ant-checkbox-inner[class] {
-  background-color: transparent;
-}
 @keyframes ald-checkbox-effect {
   0% {
     transform: scale(1);

package/dist/Checkbox/type.d.ts

@@ -1,5 +1,6 @@
 import { CheckboxChangeEvent, CheckboxGroupProps, CheckboxProps } from 'antd/lib/checkbox';
 import { CheckboxOptionType, CheckboxValueType } from 'antd/lib/checkbox/Group';
+export type TSize = 'middle' | 'small';
 export declare enum EDirection {
     VERTICAL = "vertical",
     HORIZONTAL = "horizontal"
@@ -41,6 +42,11 @@ export interface ICheckboxProps extends CheckboxProps {
      * @default -
      */
     onChange?: (e: CheckboxChangeEvent) => void;
+    /**
+     * @description 大小
+     * @default 'middle'
+     */
+    size?: TSize;
 }
 export interface ICheckboxGroupProps extends CheckboxGroupProps {
     /**
@@ -91,4 +97,9 @@ export interface ICheckboxGroupProps extends CheckboxGroupProps {
      * @default -
      */
     className?: string;
+    /**
+     * @description 大小
+     * @default 'middle'
+     */
+    size?: TSize;
 }

package/dist/ColorPicker/style/index.less

@@ -50,8 +50,7 @@
   background: #fff;
   border: 1px solid #dbdbdb;
   box-sizing: border-box;
-  box-shadow: 0 4px 6px -2px rgb(16 24 40 / 0.03),
-    0 12px 16px -4px rgb(16 24 40 / 0.08);
+  box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
   border-radius: 2px;
   padding: 8px 7px;