@aloudata/aloudata-design 1.10.14 → 2.0.0-beta.2

package/dist/Select/style/index.less

@@ -2,42 +2,23 @@
 @import './variables.less';
 @import '../../Empty/style/index.less';
 @import '../../Checkbox/style/index.less';
-@import './multiple.less';
-@import './single.less';
 @import './size.less';
 @import './status.less';
-
-.ant-select-dropdown.ant-select-dropdown {
-  padding-left: 0;
-  padding-right: 0;
-  border-radius: 2px;
-
-  &.ald-select-popup {
-    // max-height: 264px;
-    overflow-y: auto;
-    overflow-y: overlay;
-    border: 1px solid @BG70;
-    padding: 0;
-  }
-}
+@import './selectDropdown.less';
+@import './option.less';
+@import './layout.less';
 
 .ald-select.ald-select {
   display: inline-block;
   position: relative;
   box-sizing: border-box;
-  border: 1px solid @BG60;
   border-radius: 4px;
-  background-color: @BG100;
-  // padding: 0 4px;
   cursor: pointer;
-  width: 100%;
-
-  &.ald-select-status-error {
-    border-color: @error-color;
-  }
+  border-width: 1px;
+  border-style: solid;
 
   .ald-select-prefix {
-    color: @NL40;
+    color: var(--alias-colors-text-subtle, #4b5563);
     display: inline-flex;
     position: absolute;
     align-items: center;
@@ -50,85 +31,124 @@
     }
 
     &.ald-select-prefix-multiple {
-      cursor: text;
+      cursor: default;
     }
   }
 
   .ant-select {
+    .ant-select-selection-item,
+    .ant-select-selection-search-input,
+    .ant-select-selection-search-mirror,
+    .ant-select-selection-placeholder {
+      transition: none;
+    }
+
     .ant-select-selector {
-      color: @NL0;
       align-items: center;
-    }
+      transition: none;
+      padding-right: 0;
 
-    .ant-select.ald-select-prefix-select {
-      .ant-select-selector {
-        border: none;
+      .ant-select-selection-search {
+        display: flex;
       }
-    }
-
-    .ant-select-selection-overflow {
-      align-self: normal;
 
-      .ant-select-selection-overflow-item {
-        // display: flex;
-        align-items: center;
-        line-height: inherit;
-        height: 100%;
+      .ant-select-selection-item {
+        padding-right: 0;
+        font-weight: inherit;
+      }
+      // 多选中存在这个样式
+      .ant-select-selection-overflow {
+        align-self: normal;
 
-        .ant-select-selection-item {
-          height: auto;
-          margin-top: 0;
+        .ant-select-selection-overflow-item {
+          align-items: center;
+          line-height: inherit;
+          height: 100%;
 
-          .ant-select-selection-item-content {
-            // display: flex;
-            // align-items: center;
-            margin: 0;
+          & > span {
+            display: inline-flex;
           }
 
-          .ant-select-selection-item-remove {
-            display: flex;
-            align-items: center;
-            margin: 0;
-            font-size: inherit;
+          .ant-select-selection-item {
+            height: auto;
+            margin-top: 0;
+            cursor: inherit;
+
+            .ant-select-selection-item-content {
+              // display: flex;
+              // align-items: center;
+              margin: 0;
+            }
+
+            .ant-select-selection-item-remove {
+              display: flex;
+              align-items: center;
+              margin: 0;
+              font-size: inherit;
+            }
           }
-        }
 
-        &.ant-select-selection-overflow-item-rest {
-          .ant-select-selection-item {
-            border: none;
-            background: none;
-            margin-bottom: 0;
+          &.ant-select-selection-overflow-item-rest {
+            .ant-select-selection-item {
+              border: none;
+              background: none;
+              margin-bottom: 0;
+              margin-left: 0;
+
+              .ant-select-selection-item-content {
+                display: flex;
+                align-items: center;
+                height: 16px;
+                padding: 0 var(--alias-spacing-50, 4px);
+                border-radius: var(--alias-radius-100, 8px);
+                background: var(
+                  --alias-colors-bg-accent-blue-subtle-default,
+                  #d4e7fd
+                );
+                color: var(--alias-colors-text-information, #0f59b1);
+                font-size: 12px;
+              }
+            }
           }
-        }
 
-        .ald-select-multiple-tag-default {
-          color: inherit;
-          display: inline-flex;
-          align-items: center;
+          .ald-select-multiple-tag-default {
+            color: inherit;
+            display: inline-flex;
+            align-items: center;
+          }
 
-          &::before {
-            content: '，';
+          .ant-select-selection-search-input {
+            height: inherit;
+            line-height: inherit;
+            caret-color: var(--alias-colors-text-selected, #126fdd);
           }
         }
 
-        .ant-select-selection-search-input {
-          height: inherit;
-          line-height: inherit;
-          caret-color: @B60;
+        .ant-select-selection-overflow-item:first-of-type {
+          .ald-select-multiple-tag-default::before {
+            content: '';
+          }
         }
       }
 
-      .ant-select-selection-overflow-item-rest {
-        .ant-select-selection-item {
-          padding-inline-start: 0;
-        }
+      .ant-select-selection-placeholder {
+        padding-right: 17px;
       }
+    }
 
-      .ant-select-selection-overflow-item:first-of-type {
-        .ald-select-multiple-tag-default::before {
-          content: '';
+    &.ant-select-open {
+      .ant-select-selector {
+        .ant-select-selection-item {
+          color: inherit;
         }
       }
     }
   }
 }
+
+.ald-select-clear-icon,
+.ald-select-suffix-icon {
+  cursor: pointer;
+  color: var(--alias-colors-icon-subtle, #6b7280);
+  font-size: 16px;
+}

package/dist/Select/style/layout.less

@@ -0,0 +1,41 @@
+.ald-select.ald-select {
+  .ant-select {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .ant-select-selector {
+      position: initial;
+      min-width: 0;
+      flex: 1;
+    }
+
+    .ant-select-arrow {
+      position: initial;
+      margin: 0;
+    }
+
+    .ant-select-clear {
+      transform: none;
+      opacity: 1;
+      align-items: center;
+      flex: none;
+      position: relative;
+      margin-left: 8px;
+      right: 0;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+        left: -8px;
+        content: '';
+        height: 14px;
+        width: 1px;
+        background-color: var(--alias-colors-border-default, #e5e7eb);
+      }
+    }
+  }
+}

package/dist/Select/style/option.less

@@ -1,3 +1,42 @@
-// option
-@select-single-option-height: 32px;
-@select-multiple-option-height: 36px;
+@select-option-height: 36px;
+
+.ald-option {
+  padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
+  display: flex;
+  height: @select-option-height;
+  align-items: center;
+  cursor: pointer;
+  color: var(--alias-colors-text-default, #1f2937);
+  gap: var(--alias-spacing-50, 4px);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+
+  &:hover {
+    background-color: var(
+      --alias-colors-bg-interaction-hover,
+      rgba(0, 0, 0, 0.05)
+    );
+  }
+
+  &.ald-option-disabled {
+    background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
+
+    &:hover {
+      cursor: default;
+    }
+  }
+
+  &.ald-option-selected {
+    color: var(--alias-colors-text-selected, #126fdd);
+  }
+}
+
+.ald-option-label {
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/Select/style/selectDropdown.less

@@ -0,0 +1,17 @@
+// select 下拉框
+.ant-select-dropdown.ant-select-dropdown {
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: var(--alias-radius-75, 6px);
+
+  &.ald-select-popup {
+    // max-height: 264px;
+    overflow-y: auto;
+    overflow-y: overlay;
+    border: 1px solid var(--alias-colors-border-strong, #d1d5db);
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
+      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+    padding: 4px 0;
+  }
+}

package/dist/Select/style/size.less

@@ -18,43 +18,46 @@
   &.ald-select-small {
     height: @select-height-small;
     font-size: @select-font-size-small;
-    // line-height: @select-line-height-small;
     border-radius: @select-border-radius-small;
     .compact(@select-border-radius-small);
 
     .ald-select-prefix {
-      margin-left: @select-padding-left-small;
+      margin-left: @select-padding-horizontal-small;
     }
 
-    .ant-select .ant-select-selector {
-      height: @selector-height-small;
-      padding-left: calc(
-        @select-padding-left-small + var(--ald-select-prefix-width)
-      );
+    .ant-select {
+      padding-right: @select-padding-horizontal-small;
 
-      .ant-select-selection-item {
+      .ant-select-selector {
+        height: @selector-height-small;
         line-height: @selector-height-small;
-        font-size: @select-font-size-small;
-        height: 100%;
-      }
+        padding-left: calc(
+          @select-padding-horizontal-small + var(--ald-select-prefix-width)
+        );
 
-      .ald-select-multiple-tag-default {
-        font-size: @select-font-size-small;
-        line-height: @selector-height-small;
-      }
+        .ant-select-selection-item {
+          line-height: inherit;
+          font-size: @select-font-size-small;
+          height: 100%;
+        }
 
-      .ant-select-selection-search .ant-select-selection-search-input {
-        height: @selector-height-small;
-      }
+        .ald-select-multiple-tag-default {
+          line-height: inherit;
+          font-size: @select-font-size-small;
+        }
 
-      .ant-select-selection-placeholder {
-        line-height: @selector-height-small;
-        font-size: @select-font-size-small;
-        left: calc(@select-padding-left-small + var(--ald-select-prefix-width));
-      }
+        .ant-select-selection-search .ant-select-selection-search-input {
+          height: @selector-height-small;
+          line-height: inherit;
+        }
 
-      .ant-select-selection-overflow {
-        margin-left: @selector-item-margin-left-small;
+        .ant-select-selection-placeholder {
+          font-size: @select-font-size-small;
+          line-height: inherit;
+          left: calc(
+            @select-padding-horizontal-small + var(--ald-select-prefix-width)
+          );
+        }
       }
     }
 
@@ -72,45 +75,46 @@
   &.ald-select-middle {
     height: @select-height-middle;
     font-size: @select-font-size-middle;
-    // line-height: @select-line-height-middle;
     border-radius: @select-border-radius-middle;
     .compact(@select-border-radius-middle);
 
     .ald-select-prefix {
-      margin-left: @select-padding-left-middle;
+      margin-left: @select-padding-horizontal-middle;
     }
 
-    .ant-select .ant-select-selector {
-      height: @selector-height-middle;
-      padding-left: calc(
-        @select-padding-left-middle + var(--ald-select-prefix-width)
-      );
+    .ant-select {
+      padding-right: @select-padding-horizontal-middle;
 
-      .ant-select-selection-item {
+      .ant-select-selector {
+        height: @selector-height-middle;
         line-height: @selector-height-middle;
-        font-size: @select-font-size-middle;
-        height: 100%;
-      }
+        padding-left: calc(
+          @select-padding-horizontal-middle + var(--ald-select-prefix-width)
+        );
 
-      .ald-select-multiple-tag-default {
-        font-size: @select-font-size-middle;
-        line-height: @selector-height-middle;
-      }
+        .ant-select-selection-item {
+          font-size: @select-font-size-middle;
+          line-height: inherit;
+          height: 100%;
+        }
 
-      .ant-select-selection-search .ant-select-selection-search-input {
-        height: @selector-height-middle;
-      }
+        .ald-select-multiple-tag-default {
+          font-size: @select-font-size-middle;
+          line-height: inherit;
+        }
 
-      .ant-select-selection-placeholder {
-        line-height: @selector-height-middle;
-        font-size: @select-font-size-middle;
-        left: calc(
-          @select-padding-left-middle + var(--ald-select-prefix-width)
-        );
-      }
+        .ant-select-selection-search .ant-select-selection-search-input {
+          height: @selector-height-middle;
+          line-height: inherit;
+        }
 
-      .ant-select-selection-overflow {
-        margin-left: @selector-item-margin-left-middle;
+        .ant-select-selection-placeholder {
+          font-size: @select-font-size-middle;
+          line-height: inherit;
+          left: calc(
+            @select-padding-horizontal-middle + var(--ald-select-prefix-width)
+          );
+        }
       }
     }
 
@@ -128,53 +132,54 @@
   &.ald-select-large {
     height: @select-height-large;
     font-size: @select-font-size-large;
-    // line-height: @select-line-height-large;
     border-radius: @select-border-radius-large;
     .compact(@select-border-radius-large);
 
     .ald-select-prefix {
-      margin-left: @select-padding-left-large;
+      margin-left: @select-padding-horizontal-large;
     }
 
-    .ant-select .ant-select-selector {
-      height: @selector-height-large;
-      padding-left: calc(
-        @select-padding-left-large + var(--ald-select-prefix-width)
-      );
-
-      .ant-select-selection-item {
-        line-height: @selector-height-large;
-        font-size: @select-font-size-large;
-        height: 100%;
-      }
+    .ant-select {
+      padding-right: @select-padding-horizontal-large;
 
-      .ald-select-multiple-tag-default {
-        font-size: @select-font-size-large;
+      .ant-select-selector {
+        height: @selector-height-large;
         line-height: @selector-height-large;
-      }
+        padding-left: calc(
+          @select-padding-horizontal-large + var(--ald-select-prefix-width)
+        );
 
-      .ant-select-selection-search .ant-select-selection-search-input {
-        height: @selector-height-large;
-      }
+        .ant-select-selection-item {
+          font-size: @select-font-size-large;
+          line-height: inherit;
+          height: 100%;
+        }
 
-      .ant-select-selection-placeholder {
-        line-height: @selector-height-large;
-        font-size: @select-font-size-large;
-        left: calc(@select-padding-left-large + var(--ald-select-prefix-width));
-      }
+        .ald-select-multiple-tag-default {
+          font-size: @select-font-size-large;
+          line-height: inherit;
+        }
 
-      .ant-select-selection-overflow {
-        margin-left: @selector-item-margin-left-large;
+        .ant-select-selection-search .ant-select-selection-search-input {
+          height: @selector-height-large;
+          line-height: inherit;
+        }
 
-        .ant-select-selection-overflow-item-rest {
-          .ant-select-selection-item {
-            padding-inline-start: 0;
-          }
+        .ant-select-selection-placeholder {
+          font-size: @select-font-size-large;
+          line-height: inherit;
+          left: calc(
+            @select-padding-horizontal-large + var(--ald-select-prefix-width)
+          );
         }
       }
     }
   }
 
+  .ant-select-selector {
+    border: none !important;
+  }
+
   .ant-select-clear {
     width: 16px;
     height: 16px;
@@ -191,4 +196,12 @@
       margin-left: @selector-item-margin-left-large;
     }
   }
+
+  &.ald-select-primary {
+    font-weight: 500;
+  }
+
+  &.ald-select-secondary {
+    font-weight: 400;
+  }
 }

package/dist/Select/style/status.less

@@ -1,22 +1,31 @@
-.ald-select.ald-select {
-  /**
-   * @file focused状态
-   */
-  // &:hover,
-  &.ald-select-open,
-  &.ald-select-focus {
-    border-color: @B40;
-    z-index: 1;
-    // box-shadow: @shadow-drop;
-  }
-
-  /**
-   * @file disabled状态
-   */
+.select-color(@borderColor, @bgColor,@textColor) {
+  border-color: @borderColor;
+  background-color: @bgColor;
+  color: @textColor;
+
+  .ant-select-selection-placeholder {
+    color: var(--alias-colors-text-subtlest, #9ca3af);
+  }
+}
+
+.ald-select.ald-select-primary {
+  .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
+
+  &.ald-select-fitted {
+    .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
+  }
+
+  &:hover {
+    .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+  }
+
+  &:active {
+    .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-strong, #F3F4F6),var(--alias-colors-text-default, #1f2937));
+  }
+
   &.ald-select-disabled {
-    border-color: @BG60;
-    background-color: @BG90;
-    box-shadow: none;
+    .select-color(var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1)),var(--alias-colors-bg-transp, rgba(0, 0, 0, 0)),var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25)));
+
     cursor: default;
 
     .ant-select .ant-select-selector {
@@ -25,11 +34,50 @@
       .ant-select-selection-search input {
         cursor: default;
       }
+    }
+  }
+
+  &.ald-select-status-error {
+    .select-color(var(--alias-colors-border-danger, #DC2626),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
+  }
+}
+
+.ald-select {
+  &.ald-select-secondary {
+    .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+
+    &.ald-select-fitted {
+      .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+    }
+
+    &:hover {
+      .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+    }
+
+    &:active {
+      .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+    }
 
-      .ant-select-selection-placeholder,
-      .ant-select-selection-item {
-        color: @NL40;
+    &.ald-select-disabled {
+      .select-color(var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1)),var(--alias-colors-bg-transp, rgba(0, 0, 0, 0)),var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25)));
+
+      cursor: default;
+
+      .ant-select {
+        cursor: default;
+
+        .ant-select-selector {
+          cursor: default;
+        }
+
+        .ant-select-selection-search input {
+          cursor: default;
+        }
       }
     }
   }
+
+  &.ald-select-status-error {
+    .select-color(var(--alias-colors-border-danger, #DC2626),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
+  }
 }