@aloudata/aloudata-design 1.10.13 → 2.0.0-beta.1

package/dist/Button/index.d.ts

@@ -1,12 +1,12 @@
 import type { ButtonProps as AntdButtonProps, ButtonType as AntdButtonType } from 'antd/lib/button';
 import React from 'react';
 export declare const btnPrefix = "ald-btn";
-export type ButtonType = 'primary' | 'secondary' | 'dangerous' | 'text' | 'link';
+export type ButtonType = 'primary' | 'secondary' | 'dangerous' | 'text' | 'inverse';
 export type Size = 'small' | 'middle' | 'large';
 export interface IButtonProps extends Omit<AntdButtonProps, 'type' | 'dangerous' | 'shape' | 'icon' | 'href' | 'target' | 'onClick' | 'loading'> {
     /**
      * @description 类型
-     * @type 'primary' | 'secondary' | 'dangerous' | 'text' | 'link'
+     * @type 'primary' | 'secondary' | 'dangerous' | 'text' |'inverse'
      * @default primary
      */
     type?: ButtonType;
@@ -49,9 +49,8 @@ export interface IButtonProps extends Omit<AntdButtonProps, 'type' | 'dangerous'
 export declare function getButtonType(buttonType: ButtonType): AntdButtonType;
 export declare function getDangerStatus(buttonType: ButtonType): boolean;
 export declare function getButtonSizeClass(ButtonSize: Size): string;
-export declare function getIconSize(ButtonSize: Size): number;
 export declare function getShape(ButtonShape: 'circle' | 'default'): 'circle' | 'default';
-export declare const setIcon: (iconNode: React.ReactElement, size: Size, loading: boolean | {
+export declare const setIcon: (iconNode: React.ReactElement, loading: boolean | {
     delay?: number | undefined;
 }) => React.JSX.Element;
 declare function Button(props: IButtonProps): React.JSX.Element;

package/dist/Button/index.js

@@ -15,18 +15,15 @@ import React, { useContext } from 'react';
 import { ConfigContext } from "../ConfigProvider";
 import SizeContext from "../ConfigProvider/sizeContext";
 import { LoadingLine } from "../Icon";
-var ICON_LARGE = 24;
-var ICON_MIDDLE = 20;
-var ICON_SMALL = 16;
 export var btnPrefix = 'ald-btn';
 export function getButtonType(buttonType) {
-  if (!['primary', 'secondary', 'dangerous', 'text', 'link'].includes(buttonType)) {
+  if (!['primary', 'secondary', 'dangerous', 'text', 'inverse'].includes(buttonType)) {
     return 'default';
   }
   if (buttonType === 'dangerous') {
-    return 'primary';
+    return 'default';
   }
-  if (buttonType === 'secondary') {
+  if (buttonType === 'secondary' || buttonType === 'inverse') {
     return 'default';
   }
   return buttonType;
@@ -40,35 +37,25 @@ export function getDangerStatus(buttonType) {
 export function getButtonSizeClass(ButtonSize) {
   return ['small', 'large'].includes(ButtonSize) ? "".concat(btnPrefix, "-").concat(ButtonSize) : "".concat(btnPrefix, "-middle");
 }
-export function getIconSize(ButtonSize) {
-  if (ButtonSize === 'large') {
-    return ICON_LARGE;
-  }
-  if (ButtonSize === 'small') {
-    return ICON_SMALL;
-  }
-  return ICON_MIDDLE;
-}
 export function getShape(ButtonShape) {
   if (ButtonShape === 'circle') {
     return ButtonShape;
   }
   return 'default';
 }
-export var setIcon = function setIcon(iconNode, size, loading) {
+export var setIcon = function setIcon(iconNode, loading) {
   if (iconNode) {
     var p = _objectSpread({
       className: '',
-      size: ICON_LARGE,
       fill: 'currentColor'
     }, iconNode.props);
-    p.size = getIconSize(size);
+    p.size = '1em';
     return /*#__PURE__*/React.cloneElement(iconNode, p);
   }
   if (loading) {
     return /*#__PURE__*/React.createElement(LoadingLine, {
       className: "ald-loading-spin",
-      size: getIconSize(size),
+      size: '1em',
       color: "currentColor"
     });
   }
@@ -99,7 +86,7 @@ function Button(props) {
   var size = compactSize || customSize || contentSize || 'middle';
   return /*#__PURE__*/React.createElement(AntdButton, _extends({}, rest, {
     disabled: loading ? true : disabled,
-    icon: setIcon(icon, size, loading),
+    icon: setIcon(icon, loading),
     type: getButtonType(type),
     className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), className, getButtonSizeClass(size), compactItemClassnames),
     danger: getDangerStatus(type),

package/dist/Button/style/size.less

@@ -2,9 +2,9 @@
   &-large {
     min-width: auto;
     height: @button-height-large;
-    padding: @button-border-padding-large;
+    padding: @button-padding-large;
     font-size: @button-text-size-large;
-    line-height: 24px;
+    line-height: @button-line-height-large;
     border-radius: @button-border-radius-large;
 
     &.ant-btn-icon-only {
@@ -22,19 +22,24 @@
       border-radius: 50%;
     }
 
-    gap: @button-left-icon-margin-right-large;
+    gap: @button-gap-large;
 
     &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
       min-width: @button-text-min-width-large;
     }
+
+    svg {
+      font-size: @button-line-height-large;
+    }
   }
 
   &-middle {
     min-width: auto;
     height: @button-height-middle;
-    padding: @button-border-padding-middle;
+    padding: @button-padding-middle;
     font-size: @button-text-size-middle;
     border-radius: @button-border-radius-middle;
+    line-height: @button-line-height-middle;
 
     &.ant-btn-icon-only {
       min-width: @button-height-middle;
@@ -51,18 +56,22 @@
       border-radius: 50%;
     }
 
-    gap: @button-left-icon-margin-right-middle;
+    gap: @button-gap-middle;
 
     &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
       min-width: @button-text-min-width-middle;
     }
+
+    svg {
+      font-size: @button-line-height-middle;
+    }
   }
 
   &-small {
     height: @button-height-small;
-    padding: @button-border-padding-small;
+    padding: @button-padding-small;
     font-size: @button-text-size-small;
-    line-height: 22px;
+    line-height: @button-line-height-small;
     border-radius: @button-border-radius-small;
 
     &.ant-btn-icon-only {
@@ -80,10 +89,14 @@
       border-radius: 50%;
     }
 
-    gap: @button-left-icon-margin-right-small;
+    gap: @button-gap-small;
 
     &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
       min-width: @button-text-min-width-small;
     }
+
+    svg {
+      font-size: @button-line-height-small;
+    }
   }
 }

package/dist/Button/style/type.less

@@ -40,7 +40,12 @@
         box-shadow: none;
       }
 
-      &:hover,
+      &:hover {
+        color: @button-primary-color-hover;
+        background-color: @button-primary-bg-color-hover;
+        border-color: @button-primary-bg-color-hover;
+      }
+
       &:active {
         color: @button-primary-color-active;
         background-color: @button-primary-bg-color-active;
@@ -78,7 +83,12 @@
         box-shadow: unset;
       }
 
-      &:hover:not(:disabled),
+      &:hover:not(:disabled) {
+        color: @button-dangerous-color-hover;
+        background-color: @button-dangerous-bg-color-hover;
+        border-color: @button-dangerous-bg-color-hover;
+      }
+
       &:active:not(:disabled) {
         color: @button-dangerous-color-active;
         background-color: @button-dangerous-bg-color-active;
@@ -125,7 +135,12 @@
         box-shadow: none;
       }
 
-      &:hover,
+      &:hover {
+        color: @button-secondary-color-hover;
+        background-color: @button-secondary-bg-color-hover;
+        border-color: @button-secondary-border-color-hover;
+      }
+
       &:active {
         color: @button-secondary-color-active;
         background-color: @button-secondary-bg-color-active;
@@ -136,7 +151,7 @@
       &.ant-btn-loading {
         color: @button-secondary-color-disable;
         background-color: @button-secondary-bg-color-disable;
-        border-color: @button-secondary-border-color;
+        border-color: @button-secondary-border-color-disable;
         cursor: default;
         opacity: 0.5;
 
@@ -145,7 +160,7 @@
         &:active {
           color: @button-secondary-color-disable;
           background-color: @button-secondary-bg-color-disable;
-          border-color: @button-secondary-border-color;
+          border-color: @button-secondary-border-color-disable;
         }
       }
     }
@@ -153,26 +168,35 @@
     &-text {
       color: @button-text-color;
       background-color: @button-text-bg-color;
-      border: none;
+      border: 1px solid;
+      border-color: @button-text-border-color;
       box-shadow: none;
 
-      &:focus,
-      &:active {
+      &:focus {
         color: @button-text-color;
         background-color: @button-text-bg-color;
+        border-color: @button-text-border-color;
         box-shadow: none;
       }
 
-      &:hover,
-      &.ant-btn-loading {
+      &:hover {
+        color: @button-text-color-hover;
+        background-color: @button-text-bg-color-hover;
+        border-color: @button-text-border-color-hover;
+      }
+
+      &:active {
         color: @button-text-color-active;
         background-color: @button-text-bg-color-active;
-        mix-blend-mode: multiply;
+        border-color: @button-text-border-color-active;
+        box-shadow: none;
       }
 
-      &[disabled] {
+      &[disabled],
+      &.ant-btn-loading {
         color: @button-text-color-disable;
         background-color: @button-text-bg-color-disable;
+        border-color: @button-text-border-color-disable;
         cursor: default;
         opacity: 0.5;
 
@@ -181,48 +205,52 @@
         &:active {
           color: @button-text-color-disable;
           background-color: @button-text-bg-color-disable;
+          border-color: @button-text-border-color-disable;
         }
       }
     }
 
-    &-link {
-      color: @button-link-color;
-      font-weight: 400;
-      //text-shadow: @text-shadow;
-      background-color: @button-link-bg-color;
-      border-color: @button-link-bg-color;
+    &-inverse {
+      color: @button-inverse-color;
+      background-color: @button-inverse-bg-color;
+      border: 1px solid;
+      border-color: @button-inverse-border-color;
       box-shadow: none;
-      padding: 0 !important;
 
       &:focus {
-        color: @button-link-color;
-        //text-shadow: @text-shadow;
-        background-color: @button-link-bg-color;
-        border-color: @button-link-bg-color;
+        color: @button-inverse-color;
+        background-color: @button-inverse-bg-color;
+        border-color: @button-inverse-border-color;
         box-shadow: none;
       }
 
-      &:hover,
+      &:hover {
+        color: @button-inverse-color-hover;
+        background-color: @button-inverse-bg-color-hover;
+        border-color: @button-inverse-border-color-hover;
+      }
+
       &:active {
-        color: @button-link-color-active;
-        background-color: @button-link-bg-color-active;
-        border-color: @button-link-bg-color-active;
+        color: @button-inverse-color-active;
+        background-color: @button-inverse-bg-color-active;
+        border-color: @button-inverse-border-color-active;
+        box-shadow: none;
       }
 
       &[disabled],
       &.ant-btn-loading {
-        color: @button-link-color-disable;
-        background-color: @button-link-bg-color-disable;
-        border-color: @button-link-bg-color-disable;
+        color: @button-inverse-color-disable;
+        background-color: @button-inverse-bg-color-disable;
+        border-color: @button-inverse-border-color-disable;
         cursor: default;
         opacity: 0.5;
 
         &:hover,
         &:focus,
         &:active {
-          color: @button-link-color-disable;
-          background-color: @button-link-bg-color-disable;
-          border-color: @button-link-bg-color-disable;
+          color: @button-inverse-color-disable;
+          background-color: @button-inverse-bg-color-disable;
+          border-color: @button-inverse-border-color-disable;
         }
       }
     }

package/dist/Button/style/variables.less

@@ -5,65 +5,250 @@
 /** 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-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: 96px;
 
 @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-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: 76px;
 
 @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-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: 64px;
 
 // @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)
+);