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

package/dist/DataPreviewTable/style/index.less

@@ -5,7 +5,7 @@
 @import '../../Spin/style/index.less';
 
 .ald-data-preview-table {
-  border: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  border: 1px solid var(--alias-colors-border-default);
   font-size: 12px;
   font-variant-numeric: lining-nums tabular-nums;
   position: relative;
@@ -27,16 +27,16 @@
 }
 
 .ald-data-preview-header-cell {
-  background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+  background: var(--alias-colors-bg-skeleton-subtle);
   height: 100%;
   position: relative;
-  border: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  border: 1px solid var(--alias-colors-border-default);
   border-left: none;
   border-top: none;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  color: var(--alias-colors-text-strong, #111827);
+  color: var(--alias-colors-text-strong);
   font-weight: 500;
 
   .ald-data-preview-header-default {
@@ -44,7 +44,7 @@
     height: 100%;
     width: 100%;
     line-height: 24px;
-    background: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+    background: var(--alias-colors-bg-skeleton-subtle);
     display: flex;
     align-items: center;
 
@@ -55,7 +55,7 @@
       justify-content: center;
       font-size: 16px;
       margin-right: 4px;
-      color: #575757;
+      color: var(--alias-colors-icon-subtle);
     }
 
     .ald-data-preview-header-name {
@@ -84,13 +84,13 @@
 .ald-data-preview-body-cell {
   white-space: nowrap;
   overflow: hidden;
-  border: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
+  border: 1px solid var(--alias-colors-border-subtle);
   border-left: none;
   border-top: none;
   padding: 2px 4px;
   line-height: 16px;
   box-sizing: border-box;
-  color: var(--alias-colors-text-default, #1f2937);
+  color: var(--alias-colors-text-default);
   font-size: 12px;
 
   &.ald-data-preview-body-cell-custom {
@@ -102,7 +102,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #e8e8e8;
+  border: 1px solid var(--alias-colors-border-default);
   border-left: none;
   border-top: none;
   padding: 2px 3px 1px 4px;

package/dist/DatePicker/style/index.less

@@ -1,14 +1,14 @@
 @import '../../style/index.less';
 
 .ant-picker.ant-picker {
-  border-color: #dbdbdb;
+  border-color: var(--alias-colors-border-default);
 
   &:hover {
-    border-color: #dbdbdb;
+    border-color: var(--alias-colors-border-default);
   }
 
   &.ant-picker-focused {
-    border-color: #3271c9;
+    border-color: var(--interaction-border-normal);
     box-shadow: none;
   }
 }

package/dist/Divider/style/index.less

@@ -10,7 +10,7 @@
     width: 100%;
     height: 100%;
     content: '';
-    background-color: #e5e7eb;
+    background-color: var(--border-default);
     mix-blend-mode: multiply;
   }
 

package/dist/DoubleCircleIcon/style/index.less

@@ -8,7 +8,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background-color: @B95;
+  background-color: var(--background-informative-subtle);
 
   .inner {
     font-family: 'PingFang SC';
@@ -18,38 +18,38 @@
     width: 30px;
     height: 30px;
     border-radius: 50%;
-    background-color: @B90;
+    background-color: var(--background-informative-on-subtle);
   }
 }
 
 .ald-double-circle-icon-info {
-  background-color: @B95;
+  background-color: var(--background-informative-subtle);
 
   .inner {
-    background-color: @B90;
+    background-color: var(--background-informative-on-subtle);
   }
 }
 
-.ald-double-circle-icon-success{
-  background-color: @SA95;
+.ald-double-circle-icon-success {
+  background-color: var(--background-positive-subtle);
 
   .inner {
-    background-color: @SA90;
+    background-color: var(--background-positive-on-subtle);
   }
 }
 
 .ald-double-circle-icon-error {
-  background-color: @SC95;
+  background-color: var(--background-negative-subtle);
 
   .inner {
-    background-color: @SC90;
+    background-color: var(--background-negative-on-subtle);
   }
 }
 
 .ald-double-circle-icon-warning {
-  background-color: @SB95;
+  background-color: var(--background-warning-subtle);
 
   .inner {
-    background-color: @SB90;
+    background-color: var(--background-warning-on-subtle);
   }
-}
+}

package/dist/Empty/style/index.less

@@ -24,7 +24,7 @@
   }
 
   .ald-empty-title {
-    color: var(--alias-colors-text-default, #1f2937);
+    color: var(--content-primary);
     font-size: 14px;
     line-height: 24px;
     margin-bottom: 4px;
@@ -32,13 +32,13 @@
   }
 
   .ald-empty-title-small {
-    color: #4b5563;
+    color: var(--content-secondary);
     font-weight: 400;
     font-size: 14px;
   }
 
   .ald-empty-description {
-    color: #4b5563;
+    color: var(--content-secondary);
     font-size: 12px;
     line-height: 20px;
     font-weight: 400;

package/dist/Form/style/index.less

@@ -27,7 +27,7 @@
       label {
         overflow: hidden;
         height: 32px;
-        color: var(--alias-colors-text-subtle, #4b5563);
+        color: var(--alias-colors-text-subtle);
         font-weight: 500;
         line-height: 20px;
 
@@ -38,13 +38,13 @@
         }
 
         .ant-form-item-tooltip {
-          margin-left: var(--alias-spacing-25, 2px);
+          margin-left: var(--alias-spacing-25);
         }
 
         &.ant-form-item-required::before {
           width: 8px;
-          margin-right: var(--alias-spacing-25, 2px);
-          color: var(--alias-colors-text-danger, #b91c1c);
+          margin-right: var(--alias-spacing-25);
+          color: var(--alias-colors-text-danger);
           text-align: right;
           font-size: 14px;
           font-weight: 500;

package/dist/HighlightText/style/index.less

@@ -1,5 +1,5 @@
 @import '../../style/index.less';
 
 .ald-highlight-text {
-  color: var(--alias-colors-text-danger, #b91c1c);
+  color: var(--content-negative-secondary);
 }

package/dist/Icon/components/CancelledCircleFill.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/CancelledCircleFill.js

@@ -24,7 +24,7 @@ var CancelledCircleFill = function CancelledCircleFill(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     fillRule: "evenodd",
     d: "M1.667 10a8.333 8.333 0 1 1 16.666 0 8.333 8.333 0 0 1-16.666 0Zm5.976-.833a.833.833 0 1 0 0 1.666h4.714a.833.833 0 0 0 0-1.666H7.643Z",
     clipRule: "evenodd"

package/dist/Icon/components/Ellipsis.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/Ellipsis.js

@@ -24,7 +24,7 @@ var Ellipsis = function Ellipsis(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     fillRule: "evenodd",
     d: "M5.008 10.359a.833.833 0 0 0-.833-.834h-.008a.833.833 0 0 0-.834.834v.008c0 .46.373.833.834.833h.008c.46 0 .833-.373.833-.833v-.008Zm5-.834c.46 0 .834.373.834.834v.008c0 .46-.373.833-.834.833H10a.833.833 0 0 1-.833-.833v-.008c0-.46.373-.834.833-.834h.008Zm5.834 0c.46 0 .833.373.833.834v.008c0 .46-.373.833-.833.833h-.009a.833.833 0 0 1-.833-.833v-.008c0-.46.373-.834.833-.834h.009Z",
     clipRule: "evenodd"

package/dist/Icon/components/LoadingDuotone.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/LoadingDuotone.js

@@ -24,7 +24,7 @@ var LoadingDuotone = function LoadingDuotone(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {

package/dist/Icon/components/SortAscendingOrderColor.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/SortAscendingOrderColor.js

@@ -27,7 +27,7 @@ var SortAscendingOrderColor = function SortAscendingOrderColor(_ref, ref) {
     fill: "#2986F4",
     d: "M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585Z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     d: "M15.293 14c.274 0 .524.148.64.38a.624.624 0 0 1-.097.701l-3.293 3.682A.73.73 0 0 1 12 19a.73.73 0 0 1-.543-.237L8.163 15.08a.624.624 0 0 1-.097-.701.713.713 0 0 1 .64-.38h6.585Z"
   }));
 };

package/dist/Icon/components/SortColor.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/SortColor.js

@@ -24,7 +24,7 @@ var SortColor = function SortColor(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     d: "M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585ZM15.293 14c.274 0 .524.148.64.38a.624.624 0 0 1-.097.701l-3.293 3.682A.73.73 0 0 1 12 19a.73.73 0 0 1-.543-.237L8.163 15.08a.624.624 0 0 1-.097-.701.713.713 0 0 1 .64-.38h6.585Z"
   }));
 };

package/dist/Icon/components/SortDescendingOrderColor.d.ts

@@ -1,4 +1,3 @@
-import type { SVGProps } from 'react';
 import * as React from 'react';
 interface SVGRProps {
     size?: number | string;
@@ -7,5 +6,5 @@ interface SVGRProps {
     desc?: string;
     descId?: string;
 }
-declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
 export default Memo;

package/dist/Icon/components/SortDescendingOrderColor.js

@@ -24,7 +24,7 @@ var SortDescendingOrderColor = function SortDescendingOrderColor(_ref, ref) {
   }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: "#6B7280",
+    fill: props.color || 'currentColor',
     d: "M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585Z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#2986F4",

package/dist/Icon/svg/Cancelled-Circle-fill.svg

@@ -1,5 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id=" Icon / Fill / Interface /Cancelled-Circle-fill">
-<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M1.66675 9.9999C1.66675 5.39753 5.39771 1.66656 10.0001 1.66656C14.6025 1.66656 18.3334 5.39753 18.3334 9.9999C18.3334 14.6023 14.6025 18.3332 10.0001 18.3332C5.39771 18.3332 1.66675 14.6023 1.66675 9.9999ZM7.64295 9.16667C7.18271 9.16667 6.80961 9.53976 6.80961 10C6.80961 10.4602 7.18271 10.8333 7.64295 10.8333H12.357C12.8172 10.8333 13.1903 10.4602 13.1903 10C13.1903 9.53976 12.8172 9.16667 12.357 9.16667H7.64295Z" fill="#6B7280"/>
+<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M1.66675 9.9999C1.66675 5.39753 5.39771 1.66656 10.0001 1.66656C14.6025 1.66656 18.3334 5.39753 18.3334 9.9999C18.3334 14.6023 14.6025 18.3332 10.0001 18.3332C5.39771 18.3332 1.66675 14.6023 1.66675 9.9999ZM7.64295 9.16667C7.18271 9.16667 6.80961 9.53976 6.80961 10C6.80961 10.4602 7.18271 10.8333 7.64295 10.8333H12.357C12.8172 10.8333 13.1903 10.4602 13.1903 10C13.1903 9.53976 12.8172 9.16667 12.357 9.16667H7.64295Z" fill="black"/>
+
 </g>
 </svg>

package/dist/Icon/svg/Loading-duotone.svg

@@ -1,6 +1,7 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id=" Icon / Duotone / Interface / Loading-duotone">
-<path id="Icon" opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M3.33332 9.9999C3.33332 6.318 6.31809 3.33323 9.99999 3.33323C13.6815 3.33323 16.666 6.31735 16.6667 9.9987C16.6673 9.53901 17.0402 9.16656 17.5 9.16656C17.9602 9.16656 18.3333 9.53966 18.3333 9.9999C18.3333 11.0942 18.1178 12.1779 17.699 13.1889C17.2802 14.2 16.6664 15.1186 15.8925 15.8925C15.1187 16.6663 14.2001 17.2801 13.189 17.6989C12.178 18.1177 11.0943 18.3332 9.99999 18.3332C9.53975 18.3332 9.16666 17.9601 9.16666 17.4999C9.16666 17.0397 9.53975 16.6666 9.99999 16.6666C6.31809 16.6666 3.33332 13.6818 3.33332 9.9999ZM14.6961 14.7318C14.7021 14.7258 14.7081 14.7199 14.714 14.7139C14.72 14.708 14.7259 14.702 14.7319 14.6961C14.72 14.708 14.7081 14.7199 14.6961 14.7318ZM9.99999 18.3332C14.6024 18.3332 18.3333 14.6023 18.3333 9.9999C18.3333 5.39753 14.6024 1.66656 9.99999 1.66656C5.39762 1.66656 1.66666 5.39753 1.66666 9.9999C1.66666 14.6023 5.39762 18.3332 9.99999 18.3332Z" fill="#6B7280"/>
-<path id="Icon_2" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 9.16656C17.9602 9.16656 18.3333 9.53966 18.3333 9.9999C18.3333 11.0942 18.1178 12.1779 17.699 13.1889C17.2802 14.2 16.6664 15.1186 15.8925 15.8925C15.1187 16.6663 14.2001 17.2801 13.189 17.6989C12.178 18.1177 11.0943 18.3332 9.99999 18.3332C9.53975 18.3332 9.16666 17.9601 9.16666 17.4999C9.16666 17.0397 9.53975 16.6666 9.99999 16.6666C10.8755 16.6666 11.7424 16.4941 12.5512 16.1591C13.3601 15.8241 14.095 15.333 14.714 14.7139C15.3331 14.0949 15.8242 13.36 16.1592 12.5511C16.4942 11.7423 16.6667 10.8754 16.6667 9.9999C16.6667 9.53966 17.0398 9.16656 17.5 9.16656Z" fill="#6B7280"/>
+<path id="Icon" opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M3.33332 9.9999C3.33332 6.318 6.31809 3.33323 9.99999 3.33323C13.6815 3.33323 16.666 6.31735 16.6667 9.9987C16.6673 9.53901 17.0402 9.16656 17.5 9.16656C17.9602 9.16656 18.3333 9.53966 18.3333 9.9999C18.3333 11.0942 18.1178 12.1779 17.699 13.1889C17.2802 14.2 16.6664 15.1186 15.8925 15.8925C15.1187 16.6663 14.2001 17.2801 13.189 17.6989C12.178 18.1177 11.0943 18.3332 9.99999 18.3332C9.53975 18.3332 9.16666 17.9601 9.16666 17.4999C9.16666 17.0397 9.53975 16.6666 9.99999 16.6666C6.31809 16.6666 3.33332 13.6818 3.33332 9.9999ZM14.6961 14.7318C14.7021 14.7258 14.7081 14.7199 14.714 14.7139C14.72 14.708 14.7259 14.702 14.7319 14.6961C14.72 14.708 14.7081 14.7199 14.6961 14.7318ZM9.99999 18.3332C14.6024 18.3332 18.3333 14.6023 18.3333 9.9999C18.3333 5.39753 14.6024 1.66656 9.99999 1.66656C5.39762 1.66656 1.66666 5.39753 1.66666 9.9999C1.66666 14.6023 5.39762 18.3332 9.99999 18.3332Z" fill="black"/>
+<path id="Icon_2" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 9.16656C17.9602 9.16656 18.3333 9.53966 18.3333 9.9999C18.3333 11.0942 18.1178 12.1779 17.699 13.1889C17.2802 14.2 16.6664 15.1186 15.8925 15.8925C15.1187 16.6663 14.2001 17.2801 13.189 17.6989C12.178 18.1177 11.0943 18.3332 9.99999 18.3332C9.53975 18.3332 9.16666 17.9601 9.16666 17.4999C9.16666 17.0397 9.53975 16.6666 9.99999 16.6666C10.8755 16.6666 11.7424 16.4941 12.5512 16.1591C13.3601 15.8241 14.095 15.333 14.714 14.7139C15.3331 14.0949 15.8242 13.36 16.1592 12.5511C16.4942 11.7423 16.6667 10.8754 16.6667 9.9999C16.6667 9.53966 17.0398 9.16656 17.5 9.16656Z" fill="black"/>
+
 </g>
 </svg>

package/dist/Icon/svg/Sort-Ascending-order-Color.svg

@@ -1,4 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.2925 10C15.567 10 15.8168 9.85199 15.9332 9.62029C16.0496 9.3886 16.0117 9.11505 15.836 8.91852L12.5435 5.23719C12.409 5.08689 12.2099 5 12 5C11.7901 5 11.591 5.08689 11.4565 5.23719L8.16404 8.91851C7.98826 9.11504 7.95036 9.3886 8.06679 9.62029C8.18322 9.85199 8.43297 10 8.7075 10L15.2925 10Z" fill="#2986F4"/>
-<path d="M15.2925 14C15.567 14 15.8168 14.148 15.9332 14.3797C16.0496 14.6114 16.0117 14.885 15.836 15.0815L12.5435 18.7628C12.409 18.9131 12.2099 19 12 19C11.7901 19 11.591 18.9131 11.4565 18.7628L8.16404 15.0815C7.98826 14.885 7.95036 14.6114 8.06679 14.3797C8.18322 14.148 8.43296 14 8.70749 14H15.2925Z" fill="#6B7280"/>
+<path d="M15.2925 14C15.567 14 15.8168 14.148 15.9332 14.3797C16.0496 14.6114 16.0117 14.885 15.836 15.0815L12.5435 18.7628C12.409 18.9131 12.2099 19 12 19C11.7901 19 11.591 18.9131 11.4565 18.7628L8.16404 15.0815C7.98826 14.885 7.95036 14.6114 8.06679 14.3797C8.18322 14.148 8.43296 14 8.70749 14H15.2925Z" fill="black"/>
+
 </svg>

package/dist/Icon/svg/Sort-Color.svg

@@ -1,4 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.2925 10C15.567 10 15.8168 9.85199 15.9332 9.62029C16.0496 9.3886 16.0117 9.11505 15.836 8.91852L12.5435 5.23719C12.409 5.08689 12.2099 5 12 5C11.7901 5 11.591 5.08689 11.4565 5.23719L8.16404 8.91851C7.98826 9.11504 7.95036 9.3886 8.06679 9.62029C8.18322 9.85199 8.43297 10 8.7075 10L15.2925 10Z" fill="#6B7280"/>
-<path d="M15.2925 14C15.567 14 15.8168 14.148 15.9332 14.3797C16.0496 14.6114 16.0117 14.885 15.836 15.0815L12.5435 18.7628C12.409 18.9131 12.2099 19 12 19C11.7901 19 11.591 18.9131 11.4565 18.7628L8.16404 15.0815C7.98826 14.885 7.95036 14.6114 8.06679 14.3797C8.18322 14.148 8.43296 14 8.70749 14H15.2925Z" fill="#6B7280"/>
+<path d="M15.2925 10C15.567 10 15.8168 9.85199 15.9332 9.62029C16.0496 9.3886 16.0117 9.11505 15.836 8.91852L12.5435 5.23719C12.409 5.08689 12.2099 5 12 5C11.7901 5 11.591 5.08689 11.4565 5.23719L8.16404 8.91851C7.98826 9.11504 7.95036 9.3886 8.06679 9.62029C8.18322 9.85199 8.43297 10 8.7075 10L15.2925 10Z" fill="black"/>
+<path d="M15.2925 14C15.567 14 15.8168 14.148 15.9332 14.3797C16.0496 14.6114 16.0117 14.885 15.836 15.0815L12.5435 18.7628C12.409 18.9131 12.2099 19 12 19C11.7901 19 11.591 18.9131 11.4565 18.7628L8.16404 15.0815C7.98826 14.885 7.95036 14.6114 8.06679 14.3797C8.18322 14.148 8.43296 14 8.70749 14H15.2925Z" fill="black"/>
+
 </svg>

package/dist/Icon/svg/Sort-Descending-order-Color.svg

@@ -1,4 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.2925 10C15.567 10 15.8168 9.85199 15.9332 9.62029C16.0496 9.3886 16.0117 9.11505 15.836 8.91852L12.5435 5.23719C12.409 5.08689 12.2099 5 12 5C11.7901 5 11.591 5.08689 11.4565 5.23719L8.16404 8.91851C7.98826 9.11504 7.95036 9.3886 8.06679 9.62029C8.18322 9.85199 8.43297 10 8.7075 10L15.2925 10Z" fill="#6B7280"/>
+<path d="M15.2925 10C15.567 10 15.8168 9.85199 15.9332 9.62029C16.0496 9.3886 16.0117 9.11505 15.836 8.91852L12.5435 5.23719C12.409 5.08689 12.2099 5 12 5C11.7901 5 11.591 5.08689 11.4565 5.23719L8.16404 8.91851C7.98826 9.11504 7.95036 9.3886 8.06679 9.62029C8.18322 9.85199 8.43297 10 8.7075 10L15.2925 10Z" fill="black"/>
+
 <path d="M15.2925 14C15.567 14 15.8168 14.148 15.9332 14.3797C16.0496 14.6114 16.0117 14.885 15.836 15.0815L12.5435 18.7628C12.409 18.9131 12.2099 19 12 19C11.7901 19 11.591 18.9131 11.4565 18.7628L8.16404 15.0815C7.98826 14.885 7.95036 14.6114 8.06679 14.3797C8.18322 14.148 8.43296 14 8.70749 14H15.2925Z" fill="#2986F4"/>
 </svg>

package/dist/Icon/svg/ellipsis.svg

@@ -1,5 +1,6 @@
 <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id=" Icon / Light / Interface / Menu Kebab Horizontal-light-line">
-<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M5.00837 10.3586C5.00837 9.89836 4.63528 9.52527 4.17504 9.52527H4.16671C3.70647 9.52527 3.33337 9.89836 3.33337 10.3586V10.3669C3.33337 10.8272 3.70647 11.2003 4.16671 11.2003H4.17504C4.63528 11.2003 5.00837 10.8272 5.00837 10.3669V10.3586ZM10.0084 9.52527C10.4686 9.52527 10.8417 9.89836 10.8417 10.3586V10.3669C10.8417 10.8272 10.4686 11.2003 10.0084 11.2003H10C9.5398 11.2003 9.16671 10.8272 9.16671 10.3669V10.3586C9.16671 9.89836 9.5398 9.52527 10 9.52527H10.0084ZM15.8417 9.52527C16.3019 9.52527 16.675 9.89836 16.675 10.3586V10.3669C16.675 10.8272 16.3019 11.2003 15.8417 11.2003H15.8334C15.3731 11.2003 15 10.8272 15 10.3669V10.3586C15 9.89836 15.3731 9.52527 15.8334 9.52527H15.8417Z" fill="#6B7280"/>
+<path id="Icon" fill-rule="evenodd" clip-rule="evenodd" d="M5.00837 10.3586C5.00837 9.89836 4.63528 9.52527 4.17504 9.52527H4.16671C3.70647 9.52527 3.33337 9.89836 3.33337 10.3586V10.3669C3.33337 10.8272 3.70647 11.2003 4.16671 11.2003H4.17504C4.63528 11.2003 5.00837 10.8272 5.00837 10.3669V10.3586ZM10.0084 9.52527C10.4686 9.52527 10.8417 9.89836 10.8417 10.3586V10.3669C10.8417 10.8272 10.4686 11.2003 10.0084 11.2003H10C9.5398 11.2003 9.16671 10.8272 9.16671 10.3669V10.3586C9.16671 9.89836 9.5398 9.52527 10 9.52527H10.0084ZM15.8417 9.52527C16.3019 9.52527 16.675 9.89836 16.675 10.3586V10.3669C16.675 10.8272 16.3019 11.2003 15.8417 11.2003H15.8334C15.3731 11.2003 15 10.8272 15 10.3669V10.3586C15 9.89836 15.3731 9.52527 15.8334 9.52527H15.8417Z" fill="black"/>
+
 </g>
 </svg>

package/dist/IconButton/style/index.less

@@ -11,9 +11,9 @@
 @icon-button-icon-size-middle: 20px;
 @icon-button-icon-size-small: 16px;
 // borderRadius size
-@icon-button-border-radius-large: var(--alias-radius-100, 8px);
-@icon-button-border-radius-middle: var(--alias-radius-75, 6px);
-@icon-button-border-radius-small: var(--alias-radius-50, 4px);
+@icon-button-border-radius-large: var(--alias-radius-100);
+@icon-button-border-radius-middle: var(--alias-radius-75);
+@icon-button-border-radius-small: var(--alias-radius-50);
 
 .ald-icon-button,
 .ald-icon-button-dropdown {
@@ -25,12 +25,12 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  background: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
+  background: var(--global-transparent-transparent);
   border: 0;
   padding: 0;
   outline: 0;
   font-size: inherit;
-  color: var(--alias-colors-icon-subtle, rgb(107, 114, 128));
+  color: var(--alias-colors-icon-subtle);
   -webkit-tap-highlight-color: transparent;
   appearance: none;
   box-sizing: border-box;
@@ -38,36 +38,36 @@
   transition: background 0.3s;
 
   &:hover {
-    background: rgba(31, 41, 55, 0.1);
+    background: var(--action-ghost-hover);
   }
 
   &.ald-icon-button-focus {
-    background: rgba(31, 41, 55, 0.1);
+    background: var(--action-ghost-hover);
   }
 
   &.ant-dropdown-open {
-    background: rgba(31, 41, 55, 0.1);
+    background: var(--action-ghost-hover);
   }
 
   &:active {
     // mouse down
-    background: rgba(31, 41, 55, 0.05);
+    background: var(--action-ghost-active);
   }
 
   &-disabled {
-    color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
+    color: var(--alias-colors-icon-disabled);
     cursor: default;
-    background-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
+    background-color: var(--global-transparent-transparent);
     opacity: 0.5;
 
     .ald-icon {
-      color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
+      color: var(--alias-colors-icon-disabled);
     }
 
     &:hover,
     &:active,
     &:focus {
-      background-color: var(--alias-colors-bg-transp, rgba(0, 0, 0, 0));
+      background-color: var(--global-transparent-transparent);
     }
   }
 
@@ -77,18 +77,18 @@
   }
 
   &.ald-icon-button-dark {
-    color: var(--alias-colors-text-inverse-default, rgba(255, 255, 255, 0.88));
+    color: var(--content-inverted-primary);
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: var(--action-ghost-inverted-hover);
     }
 
     &.ant-dropdown-open {
-      background: rgba(255, 255, 255, 0.1);
+      background: var(--action-ghost-inverted-hover);
     }
 
     &:active {
-      background: rgba(255, 255, 255, 0.05);
+      background: var(--action-ghost-inverted-active);
     }
   }
 }

package/dist/Input/components/Input/index.js

@@ -54,7 +54,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     allowClear: allowClear ? {
       clearIcon: /*#__PURE__*/React.createElement(CloseCircleFill, {
         size: 16,
-        color: "#9CA3AF"
+        color: "var(--alias-colors-icon-subtle)"
       })
     } : undefined,
     spellCheck: false,

package/dist/Input/components/TextArea/index.js

@@ -34,7 +34,7 @@ export default /*#__PURE__*/React.forwardRef(function (props, ref) {
       clearIcon: /*#__PURE__*/React.createElement(IconButton, {
         size: "small",
         icon: /*#__PURE__*/React.createElement(CloseCircleFill, {
-          color: "#9CA3AF"
+          color: "var(--alias-colors-icon-subtle)"
         })
       })
     } : false,

package/dist/Input/style/index.less

@@ -9,5 +9,5 @@
 .ant-input-status-error:not(.ant-input-disabled):not(
     .ant-input-borderless
   ).ant-input.ant-input {
-  border-color: var(--alias-colors-border-danger, #dc2626);
+  border-color: var(--border-negative-strong);
 }

package/dist/Input/style/size.less

@@ -1,26 +1,26 @@
 // size===large
 @input-height-large: 36px;
-@input-padding-large: var(--alias-padding-75-minus-1, 6px)
-  var(--alias-padding-150-minus-1, 12px);
+@input-padding-large: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @input-font-size-large: 14px;
 @input-border-radius-large: 8px;
-@input-prefix-margin-right-large: var(--alias-spacing-100, 8px);
+@input-prefix-margin-right-large: var(--alias-spacing-100);
 @input-clear-icon-large: 20px;
 // size===middle
 @input-height-middle: 32px;
-@input-padding-middle: var(--alias-padding-75-minus-1, 6px)
-  var(--alias-padding-150-minus-1, 12px);
+@input-padding-middle: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @input-font-size-middle: 14px;
-@input-border-radius-middle: var(--alias-radius-75, 6px);
-@input-prefix-margin-right-middle: var(--alias-spacing-75, 6px);
+@input-border-radius-middle: var(--alias-radius-75);
+@input-prefix-margin-right-middle: var(--alias-spacing-75);
 @input-clear-icon-middle: 20px;
 // size===small
 @input-height-small: 28px;
-@input-padding-small: var(--alias-padding-75-minus-1, 6px)
-  var(--alias-padding-150-minus-1, 12px);
+@input-padding-small: var(--alias-padding-75-minus-1)
+  var(--alias-padding-150-minus-1);
 @input-font-size-small: 12px;
-@input-border-radius-small: var(--alias-radius-50, 4px);
-@input-prefix-margin-right-small: var(--alias-spacing-50, 4px);
+@input-border-radius-small: var(--alias-radius-50);
+@input-prefix-margin-right-small: var(--alias-spacing-50);
 @input-clear-icon-small: 20px;
 
 .ald-input-wrap {