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

package/dist/Skeleton/style/index.less

@@ -2,27 +2,27 @@
 
 .ant-skeleton .ant-skeleton-content .ant-skeleton-title[class][class] {
   height: 16px;
-  border-radius: var(--alias-radius-75, 6px);
+  border-radius: var(--alias-radius-75);
   background: linear-gradient(
     90deg,
-    #f2f4f7 -0.95%,
-    #e5e7eb 24.29%,
-    #f2f4f7 48.47%,
-    #e5e7eb 69.5%,
-    #f2f4f7 96.32%
+    var(--alias-colors-bg-skeleton-subtle) -0.95%,
+    var(--alias-colors-bg-skeleton-strong) 24.29%,
+    var(--alias-colors-bg-skeleton-subtle) 48.47%,
+    var(--alias-colors-bg-skeleton-strong) 69.5%,
+    var(--alias-colors-bg-skeleton-subtle) 96.32%
   );
 }
 
 .ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph[class][class] > li {
   height: 16px;
-  border-radius: var(--alias-radius-75, 6px);
+  border-radius: var(--alias-radius-75);
   background: linear-gradient(
     90deg,
-    #f2f4f7 -0.95%,
-    #e5e7eb 24.29%,
-    #f2f4f7 48.47%,
-    #e5e7eb 69.5%,
-    #f2f4f7 96.32%
+    var(--alias-colors-bg-skeleton-subtle) -0.95%,
+    var(--alias-colors-bg-skeleton-strong) 24.29%,
+    var(--alias-colors-bg-skeleton-subtle) 48.47%,
+    var(--alias-colors-bg-skeleton-strong) 69.5%,
+    var(--alias-colors-bg-skeleton-subtle) 96.32%
   );
 }
 
@@ -39,9 +39,9 @@
   .ant-skeleton-image {
   background: linear-gradient(
     90deg,
-    rgba(0, 0, 0, 0.06) 25%,
-    rgba(0, 0, 0, 0.15) 37%,
-    rgba(0, 0, 0, 0.06) 63%
+    var(--alias-colors-bg-skeleton-subtle) 25%,
+    var(--alias-colors-bg-skeleton-strong) 37%,
+    var(--alias-colors-bg-skeleton-subtle) 63%
   );
   background-size: 400% 100%;
   animation-name: ald-skeleton-loading;

package/dist/Slider/style/index.less

@@ -2,14 +2,67 @@
 
 .ald-slider.ald-slider.ant-slider {
   .ant-slider-rail {
-    background-color: #d1d5db;
+    background-color: var(--interaction-neutral-subtle-normal);
   }
 
   .ant-slider-track {
-    background-color: #126fdd;
+    background-color: var(--interaction-default-normal);
+
+    &:hover {
+      background-color: var(--interaction-default-hover);
+    }
+
+    &:active {
+      background-color: var(--interaction-default-active);
+    }
+
+    &:focus {
+      background-color: var(--interaction-default-active);
+    }
+  }
+
+  .ant-slider-handle::before {
+    display: none;
+  }
+
+  .ant-slider-handle::after {
+    width: 10px;
+    height: 10px;
+    background-color: var(--interaction-default-normal);
+    box-shadow: 0 0 0 1px var(--interaction-default-normal);
+  }
+
+  .ant-slider-handle:hover::after {
+    background-color: var(--interaction-default-hover);
+    box-shadow: 0 0 0 3px var(--interaction-default-hover);
+    inset-inline-start: 0;
+    inset-block-start: 0;
+  }
+
+  .ant-slider-handle:active::after,
+  .ant-slider-handle:focus::after {
+    background-color: var(--interaction-default-active);
+    box-shadow: 0 0 0 3px var(--interaction-default-active);
+    inset-inline-start: 0;
+    inset-block-start: 0;
   }
+}
+
+.ald-slider.ald-slider.ant-slider-disabled {
+  opacity: 0.5;
 
   .ant-slider-handle::after {
-    box-shadow: 0 0 0 2px #126fdd;
+    background-color: var(--interaction-default-normal);
+    box-shadow: 0 0 0 1px var(--interaction-default-normal);
+  }
+
+  .ant-slider-handle:hover::after {
+    background-color: var(--interaction-default-hover);
+    box-shadow: 0 0 0 1px var(--interaction-default-hover);
+  }
+
+  .ant-slider-handle:active::after,
+  .ant-slider-handle:focus::after {
+    box-shadow: 0 0 0 1px var(--interaction-default-active);
   }
 }

package/dist/Spin/style/customIcon.less

@@ -51,11 +51,11 @@
   width: 100%;
   height: 100%;
   opacity: 0.4;
-  background: var(--alias-colors-bg-skeleton-subtler, #fff);
+  background: var(--alias-colors-bg-skeleton-subtler);
 }
 
 .spinner-text {
-  color: var(--alias-colors-text-subtle, #4b5563);
+  color: var(--alias-colors-text-subtle);
 }
 
 @keyframes rotate {

package/dist/StatusLight/index.js

@@ -18,53 +18,38 @@ function StatusLight(_ref) {
     switch (status) {
       case 'info':
         return /*#__PURE__*/React.createElement(InProgressFill, {
-          color: "#2986F4",
+          color: "var(--non-semantic-content-blue-primary)",
           size: iconSize
         });
       case 'neutral':
         return /*#__PURE__*/React.createElement(CancelledCircleFill, {
-          color: "#6B7280",
+          color: "var(--non-semantic-content-grey-primary)",
           size: iconSize
         });
       case 'danger':
         return /*#__PURE__*/React.createElement(CloseCircleFill, {
-          color: "#EF4444",
+          color: "var(--non-semantic-content-red-primary)",
           size: iconSize
         });
       case 'success':
         return /*#__PURE__*/React.createElement(CheckCircleFill, {
-          color: "#22C55E",
+          color: "var(--non-semantic-content-green-primary)",
           size: iconSize
         });
       case 'warning':
         return /*#__PURE__*/React.createElement(AttentionCircleFill, {
-          color: "#EAB308",
+          color: "var(--non-semantic-content-orange-primary)",
           size: iconSize
         });
     }
   };
-  var getDotColor = function getDotColor() {
-    if (dotColor) return dotColor;
-    switch (status) {
-      case 'info':
-        return '#2986F4';
-      case 'neutral':
-        return '#6B7280';
-      case 'danger':
-        return '#EF4444';
-      case 'success':
-        return '#22C55E';
-      case 'warning':
-        return '#EAB308';
-    }
-  };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('ald-status-light', "ald-status-light-".concat(size), className)
+    className: classNames('ald-status-light', "ald-status-light-".concat(size), "ald-status-light-".concat(status), className)
   }, style === 'dot' && /*#__PURE__*/React.createElement("div", {
     className: "ald-prefix-dot",
-    style: {
-      backgroundColor: getDotColor()
-    }
+    style: dotColor ? {
+      backgroundColor: dotColor
+    } : undefined
   }), style === 'icon' && /*#__PURE__*/React.createElement("div", {
     className: "ald-prefix-icon"
   }, getIcon()), /*#__PURE__*/React.createElement("div", {

package/dist/StatusLight/style/index.less

@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  cursor: default;
 
   .ald-prefix-icon {
     height: 100%;
@@ -16,13 +17,13 @@
   gap: 4px;
 
   .ald-prefix-dot {
-    width: var(--global-grid-75, 6px);
-    height: var(--global-grid-75, 6px);
+    width: var(--global-grid-75);
+    height: var(--global-grid-75);
     border-radius: 100%;
   }
 
   .ald-text {
-    color: var(--alias-colors-text-default, #1f2937);
+    color: var(--alias-colors-text-default);
     font-size: 12px;
     font-weight: 400;
     line-height: 16px; /* 133.333% */
@@ -33,15 +34,66 @@
   gap: 6px;
 
   .ald-prefix-dot {
-    width: var(--global-grid-100, 8px);
-    height: var(--global-grid-100, 8px);
+    width: var(--global-grid-100);
+    height: var(--global-grid-100);
     border-radius: 100%;
   }
 
   .ald-text {
-    color: var(--alias-colors-text-default, #1f2937);
+    color: var(--alias-colors-text-default);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px; /* 142.857% */
   }
 }
+
+// Status colors - similar to Badge component
+.ald-status-light-success {
+  .ald-prefix-dot {
+    background-color: var(--non-semantic-background-green-strong);
+  }
+
+  .ald-text {
+    color: var(--non-semantic-content-green-primary);
+  }
+}
+
+.ald-status-light-danger {
+  .ald-prefix-dot {
+    background-color: var(--non-semantic-background-red-strong);
+  }
+
+  .ald-text {
+    color: var(--non-semantic-content-red-primary);
+  }
+}
+
+.ald-status-light-neutral {
+  .ald-prefix-dot {
+    background-color: var(--non-semantic-background-grey-strong);
+  }
+
+  .ald-text {
+    color: var(--non-semantic-content-grey-primary);
+  }
+}
+
+.ald-status-light-info {
+  .ald-prefix-dot {
+    background-color: var(--non-semantic-background-blue-strong);
+  }
+
+  .ald-text {
+    color: var(--non-semantic-content-blue-primary);
+  }
+}
+
+.ald-status-light-warning {
+  .ald-prefix-dot {
+    background-color: var(--non-semantic-background-orange-strong);
+  }
+
+  .ald-text {
+    color: var(--non-semantic-content-orange-primary);
+  }
+}

package/dist/Steps/components/Step/index.js

@@ -12,8 +12,8 @@ export function Step(props) {
         className: "error-icon-box icon-box"
       }, /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
         size: 16,
-        color: "#D92D20",
-        fill: "fff"
+        color: "var(--background-negative-strong)",
+        fill: "var(--content-inverted-primary)"
       }));
     }
     if (stepStatus === 'finish') {
@@ -21,8 +21,8 @@ export function Step(props) {
         className: "check-icon-box icon-box"
       }, /*#__PURE__*/React.createElement(CheckCircleDuotone, {
         size: 16,
-        color: "#D92D20",
-        fill: "fff"
+        color: "var(--background-positive-strong)",
+        fill: "var(--content-inverted-primary)"
       }));
     }
     if (stepStatus === 'process') {

package/dist/Steps/style/index.less

@@ -43,7 +43,7 @@
 
       &::after {
         height: 1.5px;
-        background-color: #126fdd;
+        background-color: var(--alias-colors-border-selected);
         content: '';
       }
     }
@@ -61,7 +61,7 @@
       max-height: 32px;
       margin-top: 4px;
       overflow: hidden;
-      color: #4b5563;
+      color: var(--alias-colors-text-subtle);
       font-weight: 400;
       font-size: 12px;
       font-style: normal;
@@ -73,19 +73,19 @@
     &.ant-steps-item-finish {
       .ant-steps-item-tail::after {
         height: 1.5px;
-        background-color: #126fdd;
+        background-color: var(--alias-colors-border-selected);
       }
 
       .ant-steps-item-container {
         .ant-steps-item-content {
           .ant-steps-item-title {
-            color: #9ca3af;
+            color: var(--alias-colors-text-subtlest);
             font-weight: 500;
             font-size: 14px;
           }
 
           .ant-steps-item-description {
-            color: #9ca3af;
+            color: var(--alias-colors-text-subtlest);
           }
         }
       }
@@ -94,12 +94,12 @@
     &.ant-steps-item-active {
       .ant-steps-item-container {
         .ant-steps-item-tail::after {
-          background-color: #e5e7eb !important;
+          background-color: var(--alias-colors-border-default) !important;
         }
 
         .ant-steps-item-content {
           .ant-steps-item-title {
-            color: #126fdd;
+            color: var(--alias-colors-text-selected);
             font-weight: 500;
             font-size: 14px;
           }
@@ -110,12 +110,12 @@
     &.ant-steps-item-wait {
       .ant-steps-item-container[class] {
         .ant-steps-item-tail::after {
-          background-color: #e5e7eb;
+          background-color: var(--alias-colors-border-default);
         }
 
         .ant-steps-item-content {
           .ant-steps-item-title {
-            color: #1f2937;
+            color: var(--alias-colors-text-default);
           }
         }
       }
@@ -125,12 +125,12 @@
       .ant-steps-item-container {
         .ant-steps-item-content {
           .ant-steps-item-title {
-            color: #b91c1c;
+            color: var(--alias-colors-text-danger);
             font-size: 14px;
           }
 
           .ant-steps-item-description {
-            color: #9ca3af;
+            color: var(--alias-colors-text-subtlest);
           }
         }
       }
@@ -182,7 +182,7 @@
         font-size: 12px;
         text-overflow: ellipsis;
         word-wrap: break-word;
-        color: #4b5563;
+        color: var(--content-secondary);
         -webkit-line-clamp: 2;
       }
     }
@@ -225,7 +225,7 @@
         &::after {
           width: 1.5px;
           height: 100%;
-          background-color: #126fdd;
+          background-color: var(--alias-colors-border-selected);
         }
       }
     }
@@ -239,11 +239,11 @@
     }
 
     &.ant-steps-item-title {
-      color: #9ca3af;
+      color: var(--alias-colors-text-subtlest);
     }
 
     .ant-steps-item-description {
-      color: #9ca3af !important;
+      color: var(--alias-colors-text-subtlest) !important;
     }
   }
 }
@@ -256,7 +256,7 @@
   &:hover {
     .ant-steps-item-title,
     .ant-steps-item-description {
-      color: #0f62fe;
+      color: var(--interaction-default-hover);
     }
   }
 }
@@ -268,7 +268,7 @@
   width: 16px;
   height: 16px;
   margin-bottom: 9px;
-  background-color: #fff;
+  background-color: var(--background-default);
   border-radius: 50%;
 }
 
@@ -277,12 +277,12 @@
 }
 
 .check-icon-box {
-  color: #126fdd;
+  color: var(--alias-colors-text-selected);
 }
 
 .ald-steps.ald-steps .finish-icon-box {
   position: relative;
-  background-color: #2986f4;
+  background-color: var(--interaction-default-hover);
   display: grid;
   place-items: center;
 
@@ -307,7 +307,7 @@
 // 提升该类名的优先级，不然会被.iconBox覆盖掉
 .ald-steps.ald-steps .process-icon-box {
   position: relative;
-  background-color: #2986f4;
+  background-color: var(--interaction-default-hover);
 
   &::after {
     position: absolute;
@@ -324,7 +324,7 @@
 
 .ald-steps.ald-steps .wait-icon-box {
   position: relative;
-  background-color: #9ca3af;
+  background-color: var(--alias-colors-icon-subtle);
 
   &::after {
     position: absolute;
@@ -332,7 +332,7 @@
     left: 50%;
     width: 6px;
     height: 6px;
-    background-color: #fff;
+    background-color: var(--background-default);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     content: '';
@@ -344,3 +344,7 @@
     content: unset !important;
   }
 }
+
+.ald-steps {
+  cursor: default;
+}

package/dist/Switch/style/index.less

@@ -74,7 +74,7 @@
 
     .ald-switch-text {
       opacity: 0.5;
-      color: #171717;
+      color: var(--alias-colors-text-default);
     }
   }
 

package/dist/Switch/style/status.less

@@ -1,12 +1,12 @@
 .ald-switch.ald-switch.ald-switch-status {
   &-error {
     .ald-switch-btn:not(.ant-switch-checked) {
-      box-shadow: 0 0 0 1px var(--alias-colors-icon-inverse-default, #fff),
-        0 0 0 2.5px var(--alias-color-icon-danger, #ef4444);
+      box-shadow: 0 0 0 1px var(--alias-colors-icon-inverse-default),
+        0 0 0 2.5px var(--alias-colors-icon-danger);
     }
 
     .ald-switch-btn.ant-switch-checked {
-      background-color: var(--alias-color-icon-danger, #ef4444);
+      background-color: var(--alias-colors-icon-danger);
     }
   }
 }

package/dist/Table/components/Header.js

@@ -19,15 +19,18 @@ export default function Header(props) {
     sortOrder = _ref.sortOrder,
     onSort = _ref.onSort;
   var sortIcon = /*#__PURE__*/React.createElement(SortIcon, {
-    size: 20
+    size: 20,
+    color: 'var(  --interaction-default-normal)'
   });
   if (sortOrder === 'ascend') {
     sortIcon = /*#__PURE__*/React.createElement(SortAscIcon, {
-      size: 20
+      size: 20,
+      color: 'var(  --interaction-default-normal)'
     });
   } else if (sortOrder === 'descend') {
     sortIcon = /*#__PURE__*/React.createElement(SortDescIcon, {
-      size: 20
+      size: 20,
+      color: 'var(  --interaction-default-normal)'
     });
   }
   var onClickTh = useCallback(function (e) {

package/dist/Table/style/index.less

@@ -15,11 +15,11 @@
   width: 100%;
 
   &.ald-table-bordered {
-    border: 1px solid var(--alias-colors-border-default, #e5e7eb);
+    border: 1px solid var(--alias-colors-border-default);
 
     .ald-table-main .ald-table-th,
     .ald-table-header-scroll-placeholder {
-      border-bottom: 1px solid var(--alias-colors-border-default, #e5e7eb);
+      border-bottom: 1px solid var(--alias-colors-border-default);
     }
 
     .ald-table-main .ald-table-tr:last-child .ald-table-td {
@@ -32,7 +32,7 @@
   width: 100%;
   font-size: 13px;
   line-height: 20px;
-  background: #fff;
+  background: var(--background-default);
 
   .ald-table-content {
     display: flex;
@@ -53,7 +53,7 @@
     cursor: col-resize;
     user-select: none;
     touch-action: none;
-    background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+    background: var(--alias-colors-bg-skeleton-strong);
 
     &::after {
       position: absolute;
@@ -64,12 +64,12 @@
       z-index: 1;
       top: 50%;
       transform: translate(4px, -50%);
-      background: var(--alias-colors-border-strong, #d1d5db);
+      background: var(--border-default-alpha);
     }
 
     &.ald-table-self-resizing {
       width: 2px;
-      background-color: #126fdd;
+      background-color: var(--interaction-border-selected);
 
       &::after {
         display: none;
@@ -88,7 +88,7 @@
   .ald-table-th,
   .ald-table-td {
     position: relative;
-    border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
+    border-bottom: 1px solid var(--alias-colors-border-subtle);
     flex: 0 0 auto;
 
     &.ald-table-fixed-left,
@@ -107,7 +107,7 @@
   .ald-table-td {
     &.ald-table-fixed-left,
     &.ald-table-fixed-right {
-      background-color: #fff;
+      background-color: var(--background-default);
     }
   }
 
@@ -122,7 +122,7 @@
       transition: box-shadow 0.2s;
       content: '';
       pointer-events: none;
-      box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.16);
+      box-shadow: inset 10px 0 8px -8px var(--semantic-neutral-alpha-300);
     }
   }
 
@@ -137,7 +137,7 @@
       transition: box-shadow 0.2s;
       content: '';
       pointer-events: none;
-      box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.16);
+      box-shadow: inset -10px 0 8px -8px var(--semantic-neutral-alpha-300);
     }
   }
 
@@ -154,7 +154,7 @@
   }
 
   .ald-table-th {
-    background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+    background: var(--alias-colors-bg-skeleton-strong);
   }
 
   .ald-table-th-default {
@@ -167,7 +167,7 @@
     height: @header-height;
     display: flex;
     align-items: center;
-    color: var(--alias-colors-text-subtle, #4b5563);
+    color: var(--alias-colors-text-subtle);
 
     &.ald-table-th-sortable {
       cursor: pointer;
@@ -223,13 +223,13 @@
     .ald-table-tr {
       &.ald-table-row-hover {
         .ald-table-td {
-          background-color: #f9fafb;
+          background-color: var(--background-neutral-on-subtle);
         }
       }
 
       &.ald-table-row-dragging {
         .ald-table-td {
-          background-color: #f9fafb;
+          background-color: var(--background-neutral-on-subtle);
         }
       }
     }
@@ -311,7 +311,7 @@
 }
 
 .ald-table-header {
-  background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+  background: var(--alias-colors-bg-skeleton-strong);
 
   &.ald-table-resizing {
     cursor: col-resize;
@@ -323,10 +323,10 @@
   height: @header-height + 1px;
   position: sticky;
   right: 0;
-  background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+  background: var(--alias-colors-bg-skeleton-strong);
   z-index: 2;
   flex: 0 0 auto;
-  border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
+  border-bottom: 1px solid var(--alias-colors-border-subtle);
 }
 
 .ald-table-body-scroll {
@@ -371,7 +371,7 @@
   padding: 16px;
   display: flex;
   justify-content: space-between;
-  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  border-top: 1px solid var(--border-default);
 }
 
 .ald-table-footer-row-selection {