@aloudata/aloudata-design 2.18.2 → 2.19.0-beta.1

package/dist/Button/style/variables.less

@@ -5,29 +5,29 @@
 /** size控制 **/
 @button-height-large: 36px;
 @button-text-size-large: 16px;
-@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-border-radius-large: var(--alias-radius-100);
+@button-padding-large: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @button-line-height-large: 24px;
 @button-gap-large: 8px;
 @button-text-min-width-large: 56px;
 
 @button-height-middle: 32px;
 @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-border-radius-middle: var(--alias-radius-75);
+@button-padding-middle: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @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: var(--alias-radius-50, 4px);
-@button-padding-small: var(--alias-padding-75-minus-1, 6px)
-  var(--alias-padding-150-minus-1, 12px);
+@button-border-radius-small: var(--alias-radius-50);
+@button-padding-small: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @button-line-height-small: 16px;
-@button-gap-small: var(--alias-radius-50, 4px);
+@button-gap-small: var(--alias-radius-50);
 @button-text-min-width-small: 48px;
 
 // @button-height-mini: 24px;
@@ -38,220 +38,87 @@
 
 /****  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)
-);
+@button-primary-bg-color: var(--action-primary-normal);
+@button-primary-bg-color-hover: var(--action-primary-hover);
+@button-primary-bg-color-active: var(--action-primary-active);
+@button-primary-bg-color-disable: var(--action-primary-normal);
 // 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)
-);
+@button-primary-color: var(--action-inverted-normal);
+@button-primary-color-hover: var(--action-inverted-hover);
+@button-primary-color-active: var(--action-inverted-active);
+@button-primary-color-disable: var(--action-inverted-normal);
 // 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-primary-border-color: var(--alias-colors-border-transp);
+@button-primary-border-color-hover: var(--alias-colors-border-transp);
+@button-primary-border-color-active: var(--alias-colors-border-transp);
+@button-primary-border-color-disable: var(--alias-colors-border-transp);
 
 /*********** 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)
-);
+@button-secondary-bg-color: var(--action-inverted-normal);
+@button-secondary-bg-color-hover: var(--action-inverted-hover);
+@button-secondary-bg-color-active: var(--action-inverted-active);
+@button-secondary-bg-color-disable: var(--action-inverted-normal);
 // 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)
-);
+@button-secondary-color: var(--action-neutral-normal);
+@button-secondary-color-hover: var(--action-neutral-hover);
+@button-secondary-color-active: var(--action-neutral-active);
+@button-secondary-color-disable: var(--action-neutral-normal);
 // 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-border-color: var(--action-outline-normal);
+@button-secondary-border-color-hover: var(--action-outline-hover);
+@button-secondary-border-color-active: var(--action-outline-active);
+@button-secondary-border-color-disable: var(--action-outline-normal);
 
 /*********** 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)
-);
+@button-dangerous-bg-color: var(--action-destructive-normal);
+@button-dangerous-bg-color-hover: var(--action-destructive-hover);
+@button-dangerous-bg-color-active: var(--action-destructive-active);
+@button-dangerous-bg-color-disable: var(--action-destructive-normal);
 // 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)
-);
+@button-dangerous-color: var(--action-inverted-normal);
+@button-dangerous-color-hover: var(--action-inverted-normal);
+@button-dangerous-color-active: var(--action-inverted-normal);
+@button-dangerous-color-disable: var(--action-inverted-normal);
 // 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-dangerous-border-color: var(--action-destructive-normal);
+@button-dangerous-border-color-hover: var(--action-destructive-hover);
+@button-dangerous-border-color-active: var(--action-destructive-active);
+@button-dangerous-border-color-disable: var(--action-destructive-normal);
 
 /*********** 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);
+@button-text-bg-color: var(--action-ghost-normal);
+@button-text-bg-color-hover: var(--action-ghost-hover);
+@button-text-bg-color-active: var(--action-ghost-active);
+@button-text-bg-color-disable: var(--action-ghost-normal);
 // 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)
-);
+@button-text-color: var(--action-neutral-normal);
+@button-text-color-hover: var(--action-neutral-hover);
+@button-text-color-active: var(--action-neutral-active);
+@button-text-color-disable: var(--action-neutral-normal);
 // 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-text-border-color: var(--alias-colors-border-transp);
+@button-text-border-color-hover: var(--alias-colors-border-transp);
+@button-text-border-color-active: var(--alias-colors-border-transp);
+@button-text-border-color-disable: var(--alias-colors-border-transp);
 
 /*********** 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: var(--alias-colors-bg-skeleton-inverse-subtle);
+@button-inverse-bg-color-hover: var(--alias-colors-bg-skeleton-inverse-strong);
 @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)
+  --alias-colors-bg-skeleton-inverse-stronger
 );
+@button-inverse-bg-color-disable: var(--alias-colors-bg-inverse-disabled);
 // 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)
-);
+@button-inverse-color: var(--alias-colors-text-inverse-default);
+@button-inverse-color-hover: var(--alias-colors-text-inverse-default);
+@button-inverse-color-active: var(--alias-colors-text-inverse-default);
+@button-inverse-color-disable: var(--alias-colors-text-inverse-disabled);
 // 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)
-);
+@button-inverse-border-color: var(--alias-colors-border-transp);
+@button-inverse-border-color-hover: var(--alias-colors-border-transp);
+@button-inverse-border-color-active: var(--alias-colors-border-transp);
+@button-inverse-border-color-disable: var(--alias-colors-border-transp);

package/dist/Checkbox/style/index.less

@@ -1,37 +1,19 @@
 @import '../../style/index.less';
 
-@checkbox-border-color-normal: var(
-  --alias-colors-border-accent-gray-subtle-default,
-  #d1d5db
-);
-@checkbox-border-color-hover: var(
-  --alias-colors-border-accent-gray-subtle-hover,
-  #9ca3af
-);
-@checkbox-border-color-active: var(
-  --alias-colors-border-accent-gray-subtle-default,
-  #d1d5db
-);
-@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: #f3f4f6;
+@checkbox-border-color-normal: var(--interaction-border-neutral-normal);
+@checkbox-border-color-hover: var(--interaction-border-hover);
+@checkbox-border-color-active: var(--interaction-border-active);
+@checkbox-border-color-disabled: var(--interaction-default-normal);
+
+@checkbox-inner-bgc-normal: var(--interaction-background-form-field);
+@checkbox-inner-bgc-hover: var(--interaction-background-form-field);
+@checkbox-inner-bgc-active: var(--interaction-background-form-field);
+@checkbox-inner-bgc-disabled: var(--interaction-background-form-field);
+
+@checkbox-checked-inner-bgc-normal: var(--interaction-default-normal);
+@checkbox-checked-inner-bgc-hover: var(--interaction-default-hover);
+@checkbox-checked-inner-bgc-active: var(--interaction-default-active);
+@checkbox-checked-inner-bgc-disabled: var(--interaction-default-normal);
 
 @checkout-border-radius: var(--alias-radius-25);
 
@@ -91,7 +73,7 @@
 
       .ant-checkbox-checked.ant-checkbox-disabled {
         .ant-checkbox-inner[class][class] {
-          background: #93c5fd;
+          background: var(--alias-colors-bg-selected-default);
         }
       }
 
@@ -118,8 +100,8 @@
 
     .ant-checkbox-checked.ant-checkbox-disabled {
       .ant-checkbox-inner[class][class] {
-        background: #93c5fd;
-        border: 1px solid rgba(0, 0, 0, 0.2);
+        background: var(--alias-colors-bg-selected-default);
+        border: 1px solid var(--alias-colors-border-disabled);
       }
     }
 
@@ -173,10 +155,11 @@
 
     .ant-checkbox-inner {
       background-color: @checkbox-inner-bgc-disabled;
+      border: 0;
 
       &::after {
-        top: 2px;
-        left: 1px;
+        top: 3px;
+        left: 2px;
         z-index: 10;
         width: 10px;
         height: 8px;

package/dist/Collapse/index.js

@@ -8,10 +8,10 @@ var Collapse = function Collapse(props) {
     expandIcon: function expandIcon(props) {
       return props.isActive ? /*#__PURE__*/React.createElement(ArrowDownLightLine, {
         size: 20,
-        color: "#6B7280"
+        color: 'var(--alias-colors-icon-subtle)'
       }) : /*#__PURE__*/React.createElement(ArrowRightLightLine, {
         size: 20,
-        color: "#6B7280"
+        color: 'var(--alias-colors-icon-subtle)'
       });
     }
   }));

package/dist/Collapse/style/index.less

@@ -6,9 +6,9 @@
 
 .ald-collapse.ant-collapse.ant-collapse {
   border-radius: @border-radius;
-  border: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  border: 1px solid var(--alias-colors-border-default);
   border-bottom: 0;
-  background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+  background: var(--alias-colors-bg-skeleton-subtle);
 
   .ant-collapse-item {
     .ant-collapse-header {
@@ -19,7 +19,7 @@
       }
 
       .ant-collapse-header-text {
-        color: var(--alias-colors-text-default, #1f2937);
+        color: var(--alias-colors-text-default);
         font-family: 'PingFang SC';
         font-size: 14px;
         line-height: 20px; /* 142.857% */
@@ -30,7 +30,7 @@
       .ant-collapse-content-box {
         padding: @content-default-padding @content-default-padding
           @content-default-padding - 1px @content-default-padding;
-        color: var(--alias-colors-text-subtle, #4b5563);
+        color: var(--alias-colors-text-subtle);
         font-family: 'PingFang SC';
         font-size: 14px;
         line-height: 20px; /* 142.857% */
@@ -39,7 +39,7 @@
 
     &:last-child {
       border-radius: 0 0 @border-radius @border-radius;
-      border-bottom: 1px solid var(--alias-colors-border-default, #e5e7eb);
+      border-bottom: 1px solid var(--alias-colors-border-default);
 
       & > .ant-collapse-content {
         overflow: hidden;
@@ -61,7 +61,7 @@
   &.ant-collapse-large {
     .ant-collapse-header {
       .ant-collapse-header-text {
-        color: var(--alias-colors-text-default, #1f2937);
+        color: var(--alias-colors-text-default);
         font-family: 'PingFang SC';
         font-size: 16px;
         line-height: 24px; /* 150% */
@@ -91,7 +91,7 @@
   .ant-collapse-item {
     .ant-collapse-content-box {
       padding: 0 @content-default-padding @content-default-padding 40px;
-      background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+      background: var(--alias-colors-bg-skeleton-subtle);
     }
 
     &:last-child {

package/dist/ColorPicker/index.js

@@ -121,7 +121,7 @@ export default function ColorPicker(_ref) {
         onColorSelect(color);
       },
       style: {
-        borderColor: specialColors.includes(color) ? '#DBDBDB' : color
+        borderColor: specialColors.includes(color) ? 'var(--alias-colors-border-subtle)' : color
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: 'block',
@@ -144,7 +144,7 @@ export default function ColorPicker(_ref) {
         onColorSelect(color);
       },
       style: {
-        borderColor: specialColors.includes(color) ? '#DBDBDB' : color
+        borderColor: specialColors.includes(color) ? 'var(--alias-colors-border-subtle)' : color
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: 'block',
@@ -187,7 +187,7 @@ export default function ColorPicker(_ref) {
       }
     })), /*#__PURE__*/React.createElement(FoldDownFill, {
       size: 14,
-      color: "#575757"
+      color: 'var(--alias-colors-icon-subtle)'
     }))));
   }
   if (mode === 'complex') {

package/dist/ColorPicker/style/complex.less

@@ -2,10 +2,9 @@
   position: relative;
   width: 258px;
   padding: 12px;
-  background-color: #fff;
+  background-color: var(--background-default);
   border-radius: 8px;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--elevation-bottom-bottom-lg);
 }
 
 .ald-color-picker-complex {
@@ -56,9 +55,9 @@
   box-sizing: border-box;
   width: 16px;
   height: 16px;
-  border: 2px solid #fff;
+  border: 2px solid var(--background-default);
   border-radius: 50%;
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--elevation-bottom-bottom-sm);
 }
 
 .ald-color-picker-complex-handler-sm {
@@ -97,7 +96,7 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--alias-colors-border-subtle);
   border-radius: 4px;
 }
 
@@ -155,11 +154,11 @@
 .ald-color-picker-complex-trigger-wrapper {
   display: inline-flex;
   padding: 3px;
-  border: 1px solid #d1d5db;
-  background-color: #fff;
+  border: 1px solid var(--alias-colors-border-strong);
+  background-color: var(--background-default);
 
   .ald-color-picker-complex-trigger-inner {
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--alias-colors-border-subtle);
   }
 }
 

package/dist/ColorPicker/style/index.less

@@ -16,21 +16,20 @@
     padding: 6px 10px;
     gap: 4px;
     height: 28px;
-    background: #fff;
-    border: 1px solid
-      var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
+    background: var(--background-default);
+    border: 1px solid var(--alias-colors-border-accent-gray-subtle-default);
     box-sizing: border-box;
     cursor: pointer;
     transition: border 0.5s ease-in-out;
     border-radius: 4px;
 
     &:not(.ald-color-picker-wrapper-disabled):hover {
-      border: 1px solid #3271c9;
+      border: 1px solid var(--interaction-border-normal);
     }
   }
 
   .ald-color-picker-wrapper-focused {
-    border: 1px solid #3271c9;
+    border: 1px solid var(--interaction-border-normal);
     box-sizing: border-box;
   }
 
@@ -57,7 +56,7 @@
 .ald-color-picker-overlay {
   position: relative;
   width: 253px;
-  background: #fff;
+  background: var(--background-default);
   box-sizing: border-box;
   border-radius: 2px;
   padding: 8px 7px;
@@ -75,7 +74,7 @@
     width: 21px;
     height: 21px;
     box-sizing: border-box;
-    border: 1px solid #fff;
+    border: 1px solid var(--background-default);
     cursor: pointer;
 
     .block {
@@ -86,7 +85,7 @@
     &.selected,
     &:hover {
       box-sizing: border-box;
-      border: 1px solid #000 !important;
+      border: 1px solid var(--border-neutral-strong) !important;
 
       .block {
         width: 17px;

package/dist/DataPreviewTable/components/Body/Cell.js

@@ -25,7 +25,7 @@ export default function Cell(props) {
     return /*#__PURE__*/React.createElement("div", {
       style: _objectSpread({
         fontStyle: 'italic',
-        color: '#858585'
+        color: 'var(--alias-colors-text-subtle)'
       }, style),
       className: classNames('ald-data-preview-body-cell', 'ald-data-preview-body-cell-null')
     }, "null");