@aloudata/aloudata-design 2.18.4 → 2.19.0-beta.2

package/dist/Input/style/status.less

@@ -1,42 +1,27 @@
 // 光标颜色
-@input-caret-color: var(
-  --alias-colors-border-accent-gray-stronger-default,
-  #4b5563
-);
+@input-caret-color: var(--interaction-border-hover);
 // color enabled
-@input-enabled-border-color: var(
-  --alias-colors-border-accent-gray-subtle-default,
-  #d1d5db
-);
-@input-enabled-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
-@input-enabled-text-color: var(--alias-colors-text-default, #1f2937);
-@input-enabled-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+@input-enabled-border-color: var(--interaction-border-neutral-normal);
+@input-enabled-bg-color: var(--interaction-background-form-field);
+@input-enabled-text-color: var(--content-primary);
+@input-enabled-placeholder-color: var(--content-tertiary);
 // color hover
-@input-hover-border-color: var(
-  --alias-colors-border-accent-gray-subtle-hover,
-  #9ca3af
-);
-@input-hover-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
-@input-hover-text-color: var(--alias-colors-text-default, #1f2937);
-@input-hover-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+@input-hover-border-color: var(--interaction-border-hover);
+@input-hover-bg-color: var(--interaction-background-form-field);
+@input-hover-text-color: var(--content-primary);
+@input-hover-placeholder-color: var(--content-tertiary);
 
 //color focus
-@input-focus-border-color: var(--alias-colors-border-selected, #126fdd);
-@input-focus-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
-@input-focus-text-color: var(--alias-colors-text-default, #1f2937);
-@input-focus-placeholder-color: var(--alias-colors-text-subtlest, #9ca3af);
+@input-focus-border-color: var(--interaction-focus-default);
+@input-focus-bg-color: var(--interaction-background-form-field);
+@input-focus-text-color: var(--content-primary);
+@input-focus-placeholder-color: var(--content-tertiary);
 
 //color disabled
-@input-disabled-border-color: #d1d5db;
-@input-disabled-bg-color: #f3f4f6;
-@input-disabled-text-color: var(
-  --alias-colors-text-disabled,
-  rgba(0, 0, 0, 0.25)
-);
-@input-disabled-placeholder-color: var(
-  --alias-colors-text-disabled,
-  rgba(0, 0, 0, 0.25)
-);
+@input-disabled-border-color: var(--interaction-border-neutral-normal);
+@input-disabled-bg-color: var(--interaction-background-form-field);
+@input-disabled-text-color: var(--content-primary);
+@input-disabled-placeholder-color: var(--content-tertiary);
 
 .input-color(@border-color,@text-color,@bg-color,@placeholder-color) {
   border-color: @border-color;
@@ -67,7 +52,7 @@
     }
 
     &.ald-input-error {
-      border-color: #dc2626 !important;
+      border-color: var(--interaction-border-alert) !important;
     }
   }
   // 带有其他内容的输入框，比如带 allowClear图标、prefix、suffix、密码图标等。
@@ -94,17 +79,17 @@
     }
     // 前缀
     .ant-input-prefix {
-      color: var(--alias-colors-text-subtle, #4b5563);
+      color: var(--alias-colors-text-subtle);
     }
     // 后缀
     .ant-input-suffix {
       .ant-input-clear-icon {
-        color: var(--alias-colors-icon-subtle, #6b7280);
+        color: var(--alias-colors-icon-subtle);
       }
     }
 
     &.ald-input-error {
-      border-color: #dc2626 !important;
+      border-color: var(--interaction-border-alert) !important;
     }
   }
 }

package/dist/InputNumber/style/index.less

@@ -16,30 +16,27 @@
 @inputNumber-border-radius-small: 4px;
 @inputNumber-padding-small: 0 7px;
 
-//默认
-@inputNumber-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
-@inputNumber-border-color: var(
-  --alias-colors-border-accent-gray-subtle-default,
-  #d1d5db
-);
-@inputNumber-color: var(--alias-colors-text-default, #1f2937);
-@inputNumber-wrapper-bg-color: @BG95;
+//默认 - 使用CSS变量映射
+@inputNumber-bg-color: var(--background-default);
+@inputNumber-border-color: var(--border-default);
+@inputNumber-color: var(--content-primary);
+@inputNumber-wrapper-bg-color: var(--background-neutral-subtle);
 //激活
-@inputNumber-active-bg-color: var(--alias-colors-bg-skeleton-subtler, #fff);
-@inputNumber-active-border-color: var(--alias-colors-border-selected, #126fdd);
+@inputNumber-active-bg-color: var(--background-default);
+@inputNumber-active-border-color: var(--interaction-border-selected);
 
 //disable
-@inputNumber-disabled-bg-color: #f3f4f6;
-@inputNumber-disabled-border-color: #d1d5db;
-@inputNumber-disabled-color: @NL40;
+@inputNumber-disabled-bg-color: var(--background-neutral-muted);
+@inputNumber-disabled-border-color: var(--border-default);
+@inputNumber-disabled-color: var(--content-secondary);
 //光标颜色
-@inputNumber-cursor-color: @B60;
+@inputNumber-cursor-color: var(--interaction-focus-default);
 
 //前后填充
-@inputNumber-addon-bg-color: #f8f8f8;
-@inputNumber-addon-color: #858585;
-@inputNumber-addon-border-color: @BG60;
-@inputNumber-addon-disable-color: #858585;
+@inputNumber-addon-bg-color: var(--background-neutral-subtle);
+@inputNumber-addon-color: var(--content-secondary);
+@inputNumber-addon-border-color: var(--border-default);
+@inputNumber-addon-disable-color: var(--content-secondary);
 
 .ald-input-number {
   &.ant-input-number {
@@ -69,20 +66,20 @@
       }
 
       .ant-input-number-handler {
-        background-color: @BG100;
+        background-color: var(--background-neutral-subtle);
 
         .ant-input-number-handler-up-inner,
         .ant-input-number-handler-down-inner {
-          color: @NL40;
+          color: var(--content-secondary);
         }
 
         &:hover,
         &:active {
-          background-color: @BG100;
+          background-color: var(--background-neutral-subtle);
 
           .ant-input-number-handler-up-inner,
           .ant-input-number-handler-down-inner {
-            color: @NL40;
+            color: var(--content-secondary);
           }
         }
       }
@@ -93,12 +90,12 @@
 
       .ant-input-number-handler-up:hover {
         height: 50% !important; // antd中就是 !important写法，这里做覆盖
-        background: @BG80;
+        background: var(--action-ghost-hover);
       }
 
       .ant-input-number-handler-down:hover {
         height: 50% !important; // 这里的!important同上
-        background: @BG80;
+        background: var(--action-ghost-hover);
       }
     }
 
@@ -283,5 +280,5 @@
 .ant-input-number-status-error:not(.ant-input-number-disabled):not(
     .ant-input-number-borderless
   ).ant-input-number.ant-input-number {
-  border-color: @error-color;
+  border-color: var(--border-negative-strong);
 }

package/dist/InputSearch/style/index.less

@@ -4,11 +4,11 @@
 .ald-input-search {
   .ald-input.ald-input.ant-input-affix-wrapper {
     width: var(--init-width) !important;
-    background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+    background-color: var(--background-neutral-subtle);
     cursor: pointer;
 
     input {
-      background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+      background-color: var(--background-neutral-subtle);
     }
 
     .ant-input-suffix {
@@ -31,10 +31,10 @@
     }
 
     ::placeholder {
-      color: var(--alias-colors-text-default, #1f2937);
+      color: var(--content-primary);
       font-style: normal;
       font-weight: 500;
-      background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
+      background-color: var(--background-neutral-subtle);
     }
 
     &.ant-input-affix-wrapper-focused:not(.inputMode),
@@ -42,15 +42,15 @@
     &.input-search-has-value:not(.inputMode) {
       width: 200px !important;
       transition: all 0.2s ease 0.1s !important;
-      background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+      background-color: var(--background-default);
 
       input {
-        background-color: #fff;
+        background-color: var(--background-default);
       }
 
       ::placeholder {
-        color: var(--alias-colors-text-subtlest, #9ca3af);
-        background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+        color: var(--content-tertiary);
+        background-color: var(--background-default);
         font-size: 14px;
         font-style: normal;
         font-weight: 400;

package/dist/List/style/index.less

@@ -14,10 +14,10 @@
 
   &-item {
     display: flex;
-    padding: var(--alias-padding-75, 6px) var(--alias-padding-100, 8px);
+    padding: var(--alias-padding-75) var(--alias-padding-100);
     align-items: center;
-    border-radius: var(--alias-radius-75, 6px);
-    gap: var(--alias-spacing-75, 6px);
+    border-radius: var(--alias-radius-75);
+    gap: var(--alias-spacing-75);
 
     &-prefix {
       display: flex;
@@ -31,7 +31,7 @@
       flex: 1;
       min-width: 0;
       display: flex;
-      gap: var(--alias-spacing-75, 6px);
+      gap: var(--alias-spacing-75);
       align-items: center;
 
       &-avatar {
@@ -47,7 +47,7 @@
         min-width: 0;
         display: flex;
         flex-direction: column;
-        gap: var(--alias-spacing-50, 4px);
+        gap: var(--alias-spacing-50);
         align-items: flex-start;
         justify-content: stretch;
 
@@ -73,21 +73,21 @@
           white-space: nowrap;
           text-overflow: ellipsis;
           max-width: 100%;
-          color: var(--alias-colors-text-subtlest, #9ca3af);
+          color: var(--alias-colors-text-subtlest);
         }
       }
     }
 
     &-action {
       display: flex;
-      gap: var(--alias-spacing-100, 8px);
+      gap: var(--alias-spacing-100);
       align-items: center;
     }
   }
 
   &-divider {
     height: 1px;
-    background-color: var(--alias-colors-border-subtle, #f3f4f6);
+    background-color: var(--alias-colors-border-subtle);
   }
 
   .ald-list-item-wrap {
@@ -99,17 +99,17 @@
 
 .ald-list-small {
   .ald-list-item {
-    gap: var(--alias-spacing-75, 6px);
+    gap: var(--alias-spacing-75);
 
     &-meta {
-      gap: var(--alias-spacing-75, 6px);
+      gap: var(--alias-spacing-75);
 
       &-avatar {
         padding: 2px 0;
       }
 
       &-content {
-        gap: var(--alias-spacing-25, 2px);
+        gap: var(--alias-spacing-25);
 
         &-title {
           font-size: 12px;

package/dist/LogicTree/style/DisplayLogicItem.less

@@ -14,7 +14,7 @@
 
     .ald-logic-tree-horizontal-line {
       position: absolute;
-      border-top: 1px solid #d1d5db;
+      border-top: 1px solid var(--border-default);
       top: 50%;
       width: @displayRecordLineWidth;
       left: -@displayRecordLineWidth;
@@ -29,14 +29,14 @@
     align-items: center;
     position: absolute;
     top: calc(50% - @displaySelectHeight / 2);
-    background-color: #fff;
+    background-color: var(--background-default);
     z-index: 1;
     left: 0;
   }
 
   .ald-logic-tree-logic-vertical-line {
     position: absolute;
-    border-left: 1px solid #d1d5db;
+    border-left: 1px solid var(--border-default);
     left: calc(@displaySelectWidth / 2);
   }
 }

package/dist/LogicTree/style/LoginItem.less

@@ -21,7 +21,7 @@
   &:hover {
     .ald-logic-tree-node-drag-icon,
     .ald-logic-tree-record-node-drag-icon {
-      background: #fff !important;
+      background: var(--background-default) !important;
     }
   }
 
@@ -35,11 +35,11 @@
   }
 
   &.is-dragging {
-    background: var(--alias-colors-bg-selected-default, #e8f2fe);
+    background: var(--background-informative-subtle);
 
     .ald-logic-tree-node-drag-icon,
     .ald-logic-tree-record-node-drag-icon {
-      background: var(--alias-colors-bg-selected-default, #e8f2fe) !important;
+      background: var(--background-informative-subtle) !important;
     }
   }
 
@@ -60,7 +60,7 @@
 
     .ald-logic-tree-horizontal-line {
       position: absolute;
-      border-top: 1px solid #d1d5db;
+      border-top: 1px solid var(--border-default);
       top: 50%;
       width: @recordLineWidth;
       left: -@recordLineWidth;
@@ -76,8 +76,8 @@
 
     .ald-logic-tree-left-bottom-dash-line {
       position: absolute;
-      border-bottom: 1px dashed #d1d5db;
-      border-left: 1px dashed #d1d5db;
+      border-bottom: 1px dashed var(--border-default);
+      border-left: 1px dashed var(--border-default);
       height: calc(50% - 16px);
       width: @recordLineWidth;
       top: calc(50% - 4px);
@@ -87,7 +87,7 @@
 
   .ald-logic-tree-logic-vertical-line {
     position: absolute;
-    border-left: 1px solid #d1d5db;
+    border-left: 1px solid var(--border-default);
     left: calc(@selectWidth / 2 + @dragIConWidth);
   }
 
@@ -97,7 +97,7 @@
     left: 16px;
     z-index: 1;
     width: @selectWidth !important;
-    background: #fff !important;
+    background: var(--background-default) !important;
 
     .ant-select-selector {
       padding-left: 8px !important;
@@ -139,10 +139,10 @@
     display: flex;
     align-items: center;
     border-radius: 6px;
-    background: var(--alias-colors-bg-selected-default, #e8f2fe);
+    background: var(--background-informative-subtle);
 
     .ald-logic-tree-record-node-drag-icon {
-      background: var(--alias-colors-bg-selected-default, #e8f2fe) !important;
+      background: var(--background-informative-subtle) !important;
     }
   }
 
@@ -161,7 +161,7 @@
     z-index: 10;
 
     .ald-logic-tree-record-node-drag-icon {
-      background-color: #fff;
+      background-color: var(--background-default);
     }
   }
 
@@ -187,7 +187,7 @@
   left: 16px;
   width: calc(100% - 16px);
   height: 2px;
-  background-color: #126fdd;
+  background-color: var(--action-primary-normal);
 }
 
 .ald-logic-tree-logic-node.is-hover-top:last-child::after,
@@ -198,7 +198,7 @@
   left: 16px;
   width: calc(100% - 16px);
   height: 2px;
-  background-color: #126fdd;
+  background-color: var(--action-primary-normal);
 }
 
 .ald-logic-tree-node-drag-icon-preview {

package/dist/MemberPicker/style/index.less

@@ -13,8 +13,8 @@
 
 .ald-member-picker-wrapper {
   box-sizing: border-box;
-  border: 1px solid var(--colors-gray-400, #dbdbdb);
-  background: var(--global-colors-base-white-950a, #fff);
+  border: 1px solid var(--border-default);
+  background: var(--background-default);
   box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
 
   &.ald-member-picker-multiple {
@@ -33,7 +33,7 @@
 
 .ald-member-picker-member-selection-wrapper {
   width: 50%;
-  border-right: 1px solid var(--alias-colors-border-default, #e5e7eb);
+  border-right: 1px solid var(--border-default);
 }
 
 .ald-member-picker-member-list-wrap {
@@ -50,12 +50,12 @@
 
   .ald-member-picker-search-input.ald-member-picker-search-input {
     border: none;
-    border-bottom: 1px solid var(--colors-gray-300, #e8e8e8) !important;
+    border-bottom: 1px solid var(--border-default) !important;
     border-radius: 0 !important;
     flex: 0 0 32px;
 
     &.ant-input-affix-wrapper-focused {
-      border-color: #dbdbdb;
+      border-color: var(--border-default);
     }
   }
 
@@ -90,7 +90,7 @@
   padding: 8px;
 
   .ald-member-picker-has-selected {
-    color: var(--colors-gray-900, #171717);
+    color: var(--content-primary);
     font-size: 13px;
     font-style: normal;
     font-weight: 400;
@@ -109,11 +109,10 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: var(--alias-radius-50, 4px);
-      border: 1px solid
-        var(--alias-colors-border-accent-gray-subtler-default, #e5e7eb);
-      background: var(--alias-colors-bg-accent-gray-subtler-default, #f9fafb);
-      color: var(--alias-colors-text-accent-gray-default, #374151);
+      border-radius: var(--alias-radius-50);
+      border: 1px solid var(--border-default);
+      background: var(--background-neutral-subtle);
+      color: var(--content-secondary);
       text-align: center;
       font-size: 14px;
       font-weight: 400;
@@ -121,8 +120,7 @@
 
       .ald-member-picker-close {
         flex: 0 0 20px;
-        border-left: 1px solid
-          var(--alias-colors-border-accent-gray-subtler-default, #e5e7eb);
+        border-left: 1px solid var(--border-default);
         cursor: pointer;
       }
     }
@@ -132,14 +130,13 @@
 .ald-member-picker-footer {
   width: 100%;
   display: flex;
-  padding: var(--global-number-spacing-spacing-sm, 12px)
-    var(--global-number-spacing-spacing-lg, 24px);
+  padding: var(--component-gap-sm) var(--component-gap-lg);
   justify-content: flex-end;
   align-items: center;
-  gap: var(--global-number-spacing-spacing-sm, 12px);
+  gap: var(--component-gap-sm);
   align-self: stretch;
-  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
-  background: var(--alias-colors-bg-skeleton-subtler, #fff);
+  border-top: 1px solid var(--border-default);
+  background: var(--background-default);
 }
 
 .ald-member-picker-option {
@@ -173,18 +170,18 @@
   }
 
   &:hover {
-    background: var(--colors-gray-98, #f4f4f4);
+    background: var(--background-neutral-subtle);
   }
 
   &.ald-member-picker-single-option-selected {
-    background: var(--colors-blue-100, #f0f6ff);
+    background: var(--background-informative-subtle);
   }
 
   &.ald-member-picker-option-disabled {
     cursor: not-allowed;
 
     .ald-member-picker-nick-label-name {
-      color: var(--colors-gray-900, #8b8b8b);
+      color: var(--content-secondary);
     }
   }
 
@@ -197,7 +194,7 @@
   }
 
   .ald-member-picker-name {
-    color: var(--colors-gray-900, #171717);
+    color: var(--content-primary);
     font-size: 13px;
     font-style: normal;
     font-weight: 400;
@@ -209,7 +206,7 @@
 }
 
 .ald-member-picker-option-id {
-  color: var(--alias-colors-text-subtle, #4b5563);
+  color: var(--content-secondary);
   font-size: 12px;
   margin-left: 4px;
 }
@@ -220,13 +217,13 @@
   width: auto;
   height: 32px;
   box-sizing: border-box;
-  background: var(--global-colors-base-white-950a, #fff);
+  background: var(--background-default);
   justify-content: space-between;
   min-width: 0;
 
   .ald-member-picker-content-wrap {
     border-radius: 2px;
-    border: 1px solid var(--colors-gray-400, #dbdbdb);
+    border: 1px solid var(--border-default);
     height: 100%;
     width: 100%;
     padding: 0 8px;
@@ -282,7 +279,7 @@
 
   .ald-member-picker-nick-label-name {
     flex: 1;
-    color: var(--alias-colors-text-default, #1f2937);
+    color: var(--content-primary);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px; /* 142.857% */
@@ -293,7 +290,7 @@
 }
 
 .ald-member-tabs {
-  background-color: #fff;
+  background-color: var(--background-default);
   height: 100%;
   width: 100%;
 
@@ -315,7 +312,7 @@
   height: 40px;
   padding: 0 8px;
   line-height: 40px;
-  border-bottom: 1px solid #e8e8e8;
+  border-bottom: 1px solid var(--border-default);
 
   &.ant-breadcrumb ol {
     display: flex;
@@ -348,7 +345,7 @@
   padding: 0 !important;
   border-radius: 0;
   border-radius: 4px;
-  background: var(--colors-neutral-white, #fff);
+  background: var(--background-default);
   box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08),
     0 8px 8px -4px rgba(16, 24, 40, 0.03);
 }
@@ -356,7 +353,7 @@
 .ald-member-picker-tag {
   display: flex;
   align-items: center;
-  gap: var(--alias-spacing-75, 6px);
+  gap: var(--alias-spacing-75);
 }
 
 .ald-member-selected-member-wrapper {