@aloudata/aloudata-design 0.2.6 → 0.3.0

package/es/Button/style/index.less

@@ -1,10 +1,8 @@
 @import '../../style/index.less';
+@import './variables.less';
 
-@ald-prefix: ant;
-@ald-iconfont-css-prefix: anticon;
-
-.ant-btn {
-  &.ant-btn {
+.ant-btn.ald-btn {
+  &.ald-btn {
     // &-loading::before{
     //   // display: none !important;
     // }
@@ -17,233 +15,218 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      height: @ald-height-base;
-      padding: 0 11px;
+      height: @height-base;
       font-weight: 500;
       font-size: 12px;
-      line-height: @ald-height-base;
-      .@{ald-iconfont-css-prefix} {
-        + span {
-          margin-left: 4px;
-        }
-
-        &-icon-left {
-          margin-left: -4px;
-        }
+      line-height: @height-base;
+      text-shadow: none;
+      vertical-align: bottom;
+    }
 
-        &-icon-right {
-          margin-right: -4px;
-        }
-      }
+    &.ant-btn-loading::before {
+      display: none;
     }
 
     &-primary {
-      text-shadow: @text-shadow;
-      background-color: @B40;
-      border-color: @B40;
-      border-radius: @ald-border-radius-base;
+      color: @Button-primary-color;
+      background-color: @Button-primary-bgColor;
+      border-color: @Button-primary-bgColor;
       box-shadow: none;
 
       &:focus {
-        text-shadow: @text-shadow;
-        background-color: @B40;
-        border-color: @B40;
-        border-radius: @ald-border-radius-base;
+        //text-shadow: @text-shadow;
+        color: @Button-primary-color;
+        background-color: @Button-primary-bgColor;
+        border-color: @Button-primary-bgColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
-      &.ant-btn-loading {
-        color: @ND0;
-        background-color: @B20;
-        border-color: @B20;
+      &:active {
+        color: @Button-primary-color-active;
+        background-color: @Button-primary-bgColor-active;
+        border-color: @Button-primary-bgColor-active;
       }
 
+      &.ant-btn-loading,
       &[disabled] {
-        color: @NL80;
-        background-color: @NL90;
-        border-color: transparent;
+        color: @Button-primary-color-disable;
+        background-color: @Button-primary-bgColor-disable;
+        border-color: @Button-primary-bgColor-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: @NL90;
-          border-color: transparent;
+          color: @Button-primary-color-disable;
+          background-color: @Button-primary-bgColor-disable;
+          border-color: @Button-primary-bgColor-disable;
         }
       }
     }
 
-    &-dangerous.ant-btn-primary {
-      color: @ND0;
-      text-shadow: @text-shadow;
-      background-color: @SC40;
-      border-color: @SC40;
+    &-dangerous {
+      color: @Button-dangerous-color;
+      background-color: @Button-dangerous-bgColor;
+      border-color: @Button-dangerous-bgColor;
       box-shadow: unset;
 
       &:focus {
-        color: @ND0;
-        text-shadow: @text-shadow;
-        background-color: @SC40;
-        border-color: @SC40;
+        color: @Button-dangerous-color;
+        background-color: @Button-dangerous-bgColor;
+        border-color: @Button-dangerous-bgColor;
         box-shadow: unset;
       }
 
       &:hover,
-      &:active,
-      &.ant-btn-loading {
-        color: @ND0;
-        background-color: @SC20;
-        border-color: @SC20;
+      &:active {
+        color: @Button-dangerous-color-active;
+        background-color: @Button-dangerous-bgColor-active;
+        border-color: @Button-dangerous-bgColor-active;
       }
 
-      &[disabled] {
-        color: @NL80;
-        background-color: @NL90;
-        border-color: transparent;
+      &[disabled],
+      &.ant-btn-loading {
+        color: @Button-dangerous-color-disable;
+        background-color: @Button-dangerous-bgColor-disable;
+        border-color: @Button-dangerous-bgColor-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: @NL90;
-          border-color: transparent;
+          color: @Button-dangerous-color-disable;
+          background-color: @Button-dangerous-bgColor-disable;
+          border-color: @Button-dangerous-bgColor-disable;
         }
       }
     }
 
+    &.ant-btn-circle {
+      justify-content: center;
+      min-width: @height-base;
+      height: @height-base;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    &-default,
     &-secondary {
-      color: @NL30;
-      text-shadow: @text-shadow;
-      background-color: @BG100;
-      border-color: @NL90;
-      border-radius: @ald-border-radius-base;
+      color: @Button-secondary-color;
+      background-color: @Button-secondary-bgColor;
+      border: 1px solid;
+      border-color: @Button-secondary-borderColor;
       box-shadow: none;
 
       &:focus {
-        color: @NL30;
-        text-shadow: @text-shadow;
-        background-color: @BG100;
-        border-color: @NL90;
-        border-radius: @ald-border-radius-base;
+        color: @Button-secondary-color;
+        //text-shadow: @text-shadow;
+        background-color: @Button-secondary-bgColor;
+        border-color: @Button-secondary-borderColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
-      &.ant-btn-loading {
-        color: @NL30;
-        background-color: @NL97;
-        border-color: @NL90;
+      &:active {
+        color: @Button-secondary-color-active;
+        background-color: @Button-secondary-bgColor-active;
+        border-color: @Button-secondary-borderColor-active;
       }
 
-      &[disabled] {
-        color: @NL80;
-        background-color: @BG100;
-        border-color: @NL90;
+      &[disabled],
+      &.ant-btn-loading {
+        color: @Button-secondary-color-disable;
+        background-color: @Button-secondary-bgColor-disable;
+        border-color: @Button-secondary-borderColor;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: @BG100;
-          border-color: @NL90;
+          color: @Button-secondary-color-disable;
+          background-color: @Button-secondary-bgColor-disable;
+          border-color: @Button-secondary-borderColor;
         }
       }
     }
 
     &-text {
-      color: @NL30;
-      text-shadow: @text-shadow;
-      background-color: @BG100;
-      border-color: @BG100;
-      border-radius: @ald-border-radius-base;
+      color: @Button-text-color;
+      background-color: @Button-text-bgColor;
+      border: none;
       box-shadow: none;
 
-      &:focus {
-        color: @NL30;
-        text-shadow: @text-shadow;
-        background-color: @BG100;
-        border-color: @BG100;
-        border-radius: @ald-border-radius-base;
+      &:focus,
+      &:active {
+        color: @Button-text-color;
+        background-color: @Button-text-bgColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
       &.ant-btn-loading {
-        // border-color: @NL97;
-        color: @NL30;
-        background-color: @NL97;
+        color: @Button-text-color-active;
+        background-color: @Button-text-bgColor-active;
       }
 
       &[disabled] {
-        color: @NL80;
-        background-color: transparent;
-        border-color: transparent;
+        color: @Button-text-color-disable;
+        background-color: @Button-text-bgColor-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: transparent;
-          border-color: transparent;
+          color: @Button-text-color-disable;
+          background-color: @Button-text-bgColor-disable;
         }
       }
     }
 
     &-link {
-      color: @B40;
+      color: @Button-link-color;
       font-weight: 400;
-      text-shadow: @text-shadow;
-      background-color: @BG100;
-      border-color: @BG100;
-      border-radius: @ald-border-radius-base;
+      //text-shadow: @text-shadow;
+      background-color: @Button-link-bgColor;
+      border-color: @Button-link-bgColor;
       box-shadow: none;
 
       &:focus {
-        color: @B40;
+        color: @Button-link-color;
         font-weight: 400;
-        text-shadow: @text-shadow;
-        background-color: @BG100;
-        border-color: @BG100;
-        border-radius: @ald-border-radius-base;
+        //text-shadow: @text-shadow;
+        background-color: @Button-link-bgColor;
+        border-color: @Button-link-bgColor;
         box-shadow: none;
       }
 
       &:hover,
-      &:active,
-      &.ant-btn-loading {
-        color: @B20;
-        background-color: @BG100;
-        border-color: @BG100;
+      &:active {
+        color: @Button-link-color-active;
+        background-color: @Button-link-bgColor-active;
+        border-color: @Button-link-bgColor-active;
       }
 
-      &[disabled] {
-        color: @NL80;
-        background-color: transparent;
-        border-color: transparent;
+      &[disabled],
+      &.ant-btn-loading {
+        color: @Button-link-color-disable;
+        background-color: @Button-link-bgColor-disable;
+        border-color: @Button-link-bgColor-disable;
         cursor: default;
 
         &:hover,
         &:focus,
         &:active {
-          color: @NL80;
-          background-color: transparent;
-          border-color: transparent;
+          color: @Button-link-color-disable;
+          background-color: @Button-link-bgColor-disable;
+          border-color: @Button-link-bgColor-disable;
         }
       }
     }
 
-    &-icon-only {
+    &.ant-btn-icon-only {
       justify-content: center;
-      width: @ald-height-base;
-      height: @ald-height-base;
+      width: initial;
       padding: 0;
       vertical-align: bottom;
 
@@ -254,52 +237,104 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-left: 0;
+        margin: 0;
       }
     }
 
-    &-circle {
-      justify-content: center;
-      width: @ald-height-base;
+    &-large {
       min-width: auto;
-      padding: 0;
-      border-radius: 50%;
+      height: @Button-height-large;
+      padding: @Button-border-padding-large;
+      font-size: @Button-text-size-large;
+      border-radius: @Button-borderRadius-large;
+
+      &.ant-btn-icon-only {
+        min-width: @Button-height-large;
+        height: @Button-height-large;
+        border-radius: @Button-borderRadius-large;
+      }
+
+      &.ant-btn-circle {
+        min-width: @Button-height-large;
+        height: @Button-height-large;
+        border-radius: 50%;
+      }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-large;
+      }
     }
 
-    &-lg {
+    &-middle {
       min-width: auto;
-      height: 32px;
-      font-size: 14px;
+      height: @Button-height-middle;
+      padding: @Button-border-padding-middle;
+      font-size: @Button-text-size-middle;
+      border-radius: @Button-borderRadius-middle;
+
+      &.ant-btn-icon-only {
+        min-width: @Button-height-middle;
+        height: @Button-height-middle;
+        border-radius: @Button-borderRadius-middle;
+      }
+
+      &.ant-btn-circle {
+        min-width: @Button-height-middle;
+        height: @Button-height-middle;
+        border-radius: 50%;
+      }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-middle;
+      }
+    }
+
+    &-small {
+      height: @Button-height-small;
+      padding: @Button-border-padding-small;
+      font-size: @Button-text-size-small;
+      line-height: 22px;
+      border-radius: @Button-borderRadius-small;
 
       &.ant-btn-icon-only {
-        width: 32px;
-        min-width: auto;
-        height: 32px;
+        min-width: @Button-height-small;
+        height: @Button-height-small;
+        border-radius: @Button-borderRadius-small;
       }
 
       &.ant-btn-circle {
-        width: 32px;
-        height: 32px;
+        min-width: @Button-height-small;
+        height: @Button-height-small;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-small;
+      }
     }
 
-    &-sm {
-      height: 24px;
+    &-mini {
+      height: @Button-height-mini;
+      padding: @Button-border-padding-mini;
+      font-size: @Button-text-size-mini;
       line-height: 22px;
-      border-radius: @ald-border-radius-sm;
+      border-radius: @Button-borderRadius-mini;
 
       &.ant-btn-icon-only {
-        width: 24px;
-        height: 24px;
-        border-radius: @ald-border-radius-sm;
+        min-width: @Button-height-mini;
+        height: @Button-height-mini;
+        border-radius: @Button-borderRadius-mini;
       }
 
       &.ant-btn-circle {
-        width: 32px;
-        height: 32px;
+        min-width: @Button-height-mini;
+        height: @Button-height-mini;
         border-radius: 50%;
       }
+
+      .aldicon-icon-left + span {
+        margin-left: @Button-leftIcon-marginRight-mini;
+      }
     }
   }
 }

package/es/Button/style/variables.less

@@ -0,0 +1,67 @@
+@ald-prefix: ald;
+@ald-iconfont-css-prefix: aldicon;
+
+@Button-padding: 0 12px;
+
+/** size控制 **/
+@Button-height-large: 36px;
+@Button-text-size-large: 16px;
+@Button-borderRadius-large: 8px;
+@Button-border-padding-large: 0 11px;
+@Button-leftIcon-marginRight-large: 8px;
+
+@Button-height-middle: 32px;
+@Button-text-size-middle: 14px;
+@Button-borderRadius-middle: 6px;
+@Button-border-padding-middle: 0 11px;
+@Button-leftIcon-marginRight-middle: 8px;
+
+@Button-height-small: 28px;
+@Button-text-size-small: 12px;
+@Button-borderRadius-small: 4px;
+@Button-border-padding-small: 0 7px;
+@Button-leftIcon-marginRight-small: 4px;
+
+@Button-height-mini: 24px;
+@Button-text-size-mini: 12px;
+@Button-borderRadius-mini: 4px;
+@Button-border-padding-mini: 0 7px;
+@Button-leftIcon-marginRight-mini: 4px;
+
+/****  type控制  ****/
+@Button-primary-bgColor: @B60;
+@Button-primary-bgColor-active: @B50;
+@Button-primary-bgColor-disable: @B90;
+@Button-primary-color: @ND0;
+@Button-primary-color-active: @ND0;
+@Button-primary-color-disable: @ND0;
+
+@Button-dangerous-bgColor: @SC60;
+@Button-dangerous-bgColor-active: @SC50;
+@Button-dangerous-bgColor-disable: @SC90;
+@Button-dangerous-color: @ND0;
+@Button-dangerous-color-active: @ND0;
+@Button-dangerous-color-disable: @ND0;
+
+@Button-secondary-bgColor: @BG97;
+@Button-secondary-bgColor-active: @BG95;
+@Button-secondary-bgColor-disable: @BG97;
+@Button-secondary-color: @NL30;
+@Button-secondary-color-active: @B60;
+@Button-secondary-color-disable: @NL80;
+@Button-secondary-borderColor: @NL90;
+@Button-secondary-borderColor-active: @B60;
+
+@Button-text-bgColor: transparent;
+@Button-text-bgColor-active: @NL97;
+@Button-text-bgColor-disable: @BG100;
+@Button-text-color: @NL30;
+@Button-text-color-active: @B60;
+@Button-text-color-disable: @NL80;
+
+@Button-link-bgColor: @BG100;
+@Button-link-bgColor-active: @BG100;
+@Button-link-bgColor-disable: @BG100;
+@Button-link-color: @B60;
+@Button-link-color-active: @B50;
+@Button-link-color-disable: @B90;

package/es/Checkbox/style/index.less

@@ -1,7 +1,22 @@
 @import '../../style/index.less';
 
 .ald-checkbox {
+  height: 20px;
+  color: @NL0;
+  font-size: 14px;
+  line-height: 20px;
+
+  .ant-checkbox-wrapper {
+    height: 20px;
+    color: @NL0;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
   .ant-checkbox-inner {
+    width: 16px;
+    height: 16px;
     background-color: @BG97;
     border-color: @NL60;
     border-radius: 4px;
@@ -34,6 +49,13 @@
   }
 
   .ant-checkbox-disabled {
+    cursor: default;
+
+    & + span {
+      color: @NL0;
+      cursor: default;
+    }
+
     .ant-checkbox-inner {
       background-color: @NL90;
       border-color: @NL90;
@@ -64,6 +86,11 @@
       }
     }
   }
+
+  .ant-checkbox + span {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
 }
 
 .ant-checkbox-group.ald-checkbox,
@@ -72,8 +99,15 @@
     border-color: @B60;
   }
 
-  .ant-checkbox:hover .ant-checkbox-inner,
   .ant-checkbox-input:focus + .ant-checkbox-inner {
+    border-color: @NL60;
+  }
+
+  .ant-checkbox:hover .ant-checkbox-inner {
     border-color: @B60;
   }
 }
+
+.ald-checkbox.ant-checkbox-wrapper-disabled {
+  cursor: default;
+}

package/es/ConfigProvider/index.d.ts

@@ -1,3 +1,4 @@
 import { ConfigProvider } from 'antd';
+export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, DirectionType, ConfigConsumerProps, configConsumerProps, globalConfig, } from 'antd/lib/config-provider/';
 export type { ConfigProviderProps } from 'antd/lib/config-provider';
 export default ConfigProvider;

package/es/ConfigProvider/index.js

@@ -1,3 +1,4 @@
 import "antd/es/config-provider/style";
 import _ConfigProvider from "antd/es/config-provider";
+export { ConfigContext, ConfigConsumer, configConsumerProps, globalConfig } from 'antd/lib/config-provider/';
 export default _ConfigProvider;

package/es/Dropdown/Button.js

@@ -28,6 +28,6 @@ export default function DropdownButton(props) {
     disabled: disabled,
     onVisibleChange: onVisibleChange
   }, /*#__PURE__*/React.createElement(Button, Object.assign({}, buttonProps), children, /*#__PURE__*/React.createElement(Icon, {
-    type: "expand_more"
+    type: "arrows-down-line"
   })));
 }