@aloudata/aloudata-design 2.0.0-beta.9 → 2.0.0

package/dist/Tree/style/checkbox.less

@@ -1,7 +1,6 @@
-.aldCheckboxFn(@checkbox-prefix-cls: ~'ald-tree-checkbox') {
-  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
+.aldCheckboxFn() {
   // 一般状态
-  .@{checkbox-prefix-cls} {
+  .ald-tree-checkbox {
     .reset-component();
 
     position: relative;
@@ -22,11 +21,7 @@
       animation: ald-checkbox-effect 0.36s ease-in-out;
       animation-fill-mode: backwards;
       content: '';
-    }
-
-    &:hover::after,
-    .@{checkbox-prefix-cls}-wrapper:hover &::after {
-      visibility: hidden;
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
 
     &-inner {
@@ -38,7 +33,8 @@
       height: @checkbox-size;
       direction: ltr;
       background-color: @checkbox-check-bg;
-      border: 1px solid #dbdbdb;
+      border: 1px solid
+        var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
       border-radius: @checkbox-border-radius;
       border-collapse: separate;
       transition: all 0.3s;
@@ -54,7 +50,7 @@
         display: table;
         width: @check-width;
         height: @check-height;
-        border: 2px solid @checkbox-check-color;
+        border: 2px solid;
         border-top: 0;
         border-left: 0;
         transform: rotate(45deg) scale(0) translate(-50%, -50%);
@@ -62,6 +58,21 @@
         transition: all 0.1s @ease-in-back, opacity 0.1s;
         content: ' ';
       }
+
+      &:hover {
+        border-color: var(
+          --alias-colors-border-accent-gray-subtle-hover,
+          #9ca3af
+        );
+      }
+
+      &:active {
+        border-color: var(
+          --alias-colors-border-accent-gray-subtle-default,
+          #d1d5db
+        );
+        background-color: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+      }
     }
 
     &-input {
@@ -76,10 +87,10 @@
   }
 
   // 选中状态
-  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
+  .ald-tree-checkbox-checked .ald-tree-checkbox-inner::after {
     position: absolute;
     display: table;
-    border: 2px solid @checkbox-color;
+    border: 2px solid var(--alias-colors-icon-inverse-default, #fff);
     border-top: 0;
     border-left: 0;
     transform: rotate(45deg) scale(1) translate(-50%, -50%);
@@ -88,30 +99,31 @@
     content: ' ';
   }
 
-  .@{checkbox-prefix-cls}-checked {
-    .@{checkbox-inner-prefix-cls} {
-      background-color: #f8f8f8;
+  .ald-tree-checkbox-checked {
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
   }
 
-  .@{checkbox-prefix-cls}-disabled {
+  .ald-tree-checkbox-disabled {
     cursor: initial;
 
-    &.@{checkbox-prefix-cls}-checked {
-      .@{checkbox-inner-prefix-cls}::after {
-        border-color: @disabled-color;
+    &.ald-tree-checkbox-checked {
+      .ald-tree-checkbox-inner::after {
+        border-color: var(--alias-colors-icon-disabled, rgba(0, 0, 0, 0.25));
         animation-name: none;
       }
     }
 
-    .@{checkbox-prefix-cls}-input {
+    .ald-tree-checkbox-input {
       cursor: initial;
       pointer-events: none;
     }
 
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @input-disabled-bg;
-      // border-color: @border-color-base !important;
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+      border-color: var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1));
 
       &::after {
         border-color: @input-disabled-bg;
@@ -127,12 +139,12 @@
 
     // Not show highlight border of checkbox when disabled
     &:hover::after,
-    .@{checkbox-prefix-cls}-wrapper:hover &::after {
+    .ald-tree-checkbox-wrapper:hover &::after {
       visibility: hidden;
     }
   }
 
-  .@{checkbox-prefix-cls}-wrapper {
+  .ald-tree-checkbox-wrapper {
     .reset-component();
 
     display: inline-flex;
@@ -147,7 +159,7 @@
       content: '\a0';
     }
 
-    &.@{checkbox-prefix-cls}-wrapper-disabled {
+    &.ald-tree-checkbox-wrapper-disabled {
       cursor: initial;
     }
 
@@ -163,12 +175,12 @@
     }
   }
 
-  .@{checkbox-prefix-cls} + span {
+  .ald-tree-checkbox + span {
     padding-right: 8px;
     padding-left: 8px;
   }
 
-  .@{checkbox-prefix-cls}-group {
+  .ald-tree-checkbox-group {
     .reset-component();
 
     display: inline-block;
@@ -187,11 +199,13 @@
   }
 
   // 半选状态
-  .@{checkbox-prefix-cls}-indeterminate {
-    .@{checkbox-inner-prefix-cls} {
-      background-color: @checkbox-check-bg;
+  .ald-tree-checkbox-indeterminate {
+    .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
+      border-color: var(--alias-colors-bg-selected-strong-default, #126fdd);
     }
-    .@{checkbox-inner-prefix-cls}::after {
+
+    .ald-tree-checkbox-inner::after {
       @indeterminate-width: @checkbox-size - 8px;
       @indeterminate-height: @checkbox-size - 14px;
 
@@ -199,16 +213,23 @@
       left: 50%;
       width: @indeterminate-width;
       height: @indeterminate-height;
-      background-color: @checkbox-color;
+      background-color: var(--alias-colors-icon-inverse-default, #fff);
       border: 0;
       transform: translate(-50%, -50%) scale(1);
       opacity: 1;
       content: ' ';
     }
 
-    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
-      background-color: @disabled-color;
-      border-color: @disabled-color;
+    &.ald-tree-checkbox-disabled .ald-tree-checkbox-inner {
+      background-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+      border-color: var(--alias-colors-bg-disabled, rgba(0, 0, 0, 0.05));
+
+      &::after {
+        background-color: var(
+          --alias-colors-icon-disabled,
+          rgba(0, 0, 0, 0.25)
+        );
+      }
     }
   }
 }

package/dist/Tree/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/index.less';
 @import '../../Checkbox/style/index.less';
+@import '../../HighlightText/style/index.less';
 @import './var.less';
 @import './rtl.less';
 @import './mixin.less';
@@ -26,9 +27,22 @@
     padding: 3px 0;
   }
 
-  .ald-tree-treenode.ald-tree-treenode-draggable {
-    .ald-tree-draggable-icon {
-      opacity: 1;
+  .ald-tree-treenode {
+    &.ald-tree-treenode-draggable {
+      .ald-tree-draggable-icon {
+        opacity: 1;
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    }
+  }
+
+  &.ald-tree-no-children {
+    .ald-tree-switcher {
+      display: none;
     }
   }
 }
@@ -40,6 +54,10 @@
   font-weight: 400;
   color: var(--alias-colors-text-default, #1f2937);
 
+  &.ald-tree-node-disabled {
+    display: none;
+  }
+
   .ald-tree-draggable-icon {
     display: inline-flex;
     align-items: center;
@@ -56,6 +74,10 @@
     }
   }
 
+  .ald-tree-checkbox {
+    margin: 0;
+  }
+
   .ald-tree-node-content-wrapper {
     padding: @tree-padding-default;
     line-height: @tree-line-height-default;
@@ -82,7 +104,7 @@
 
       .ald-tree-tab-leader {
         flex: 1;
-        border-top: 1px dashed #dbdbdb;
+        border-top: 1px dashed var(--alias-colors-border-default);
         height: 0;
         margin: 0 4px;
       }
@@ -90,7 +112,6 @@
 
     &:hover {
       background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
-      mix-blend-mode: multiply;
     }
 
     &.ald-tree-node-selected {
@@ -139,9 +160,9 @@
 
 .ald-tree-treenode-switcher-open .ald-tree-switcher svg {
   transition: transform 0.2s;
+  transform: rotate(90deg);
 }
 
 .ald-tree-treenode-switcher-close .ald-tree-switcher svg {
-  transform: rotate(-90deg);
   transition: transform 0.2s;
 }

package/dist/Tree/style/mixin.less

@@ -85,8 +85,12 @@
     &-disabled {
       // >>> Title
       .@{custom-tree-prefix-cls}-node-content-wrapper {
-        color: @disabled-color;
-        cursor: not-allowed;
+        color: var(--alias-colors-text-default, #1f2937);
+        cursor: default;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
 
         &:hover {
           background: transparent;
@@ -98,10 +102,10 @@
       background: @tree-node-hover-bg;
     }
 
-    &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
-      color: @tree-node-highlight-color;
-      font-weight: 500;
-    }
+    // &:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
+    //   // font-weight: 500;
+    //   // color: var(--alias-colors-text-danger);
+    // }
 
     &-draggable {
       .@{custom-tree-prefix-cls}-draggable-icon {

package/dist/Tree/style/var.less

@@ -29,7 +29,7 @@
 @normal-color: #d9d9d9;
 @border-radius-base: 2px;
 @tree-node-selected-bg: @primary-2;
-@checkbox-color: @primary-color;
+@checkbox-color: var(--alias-colors-border-accent-gray-subtle-default, #d1d5db);
 @checkbox-border-radius: @border-radius-sm;
 @checkbox-check-bg: transparent;
 @checkbox-border-width: @border-width-base;