amis-ui 2.7.2 → 2.8.0

package/scss/components/form/_select.scss

@@ -15,11 +15,20 @@
       display: inline-block;
       vertical-align: middle;
       font-size: var(--Form-selectValue-fontSize);
+      font-weight: var(--select-multiple-fontWeight);
+      color: var(--select-multiple-color);
       background: var(--Form-select-value-bgColor);
       border: px2rem(1px) solid var(--Form-select-value-borderColor);
-      border-radius: px2rem(2px);
-      margin-right: var(--gap-xs);
-      margin-bottom: var(--gap-xs);
+      border-radius: var(--select-multiple-top-left-border-radius)
+        var(--select-multiple-top-right-border-radius)
+        var(--select-multiple-bottom-right-border-radius)
+        var(--select-multiple-bottom-left-border-radius);
+      padding: var(--select-multiple-paddingTop)
+        var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom)
+        var(--select-multiple-paddingLeft);
+      margin: var(--select-multiple-marginTop)
+        var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom)
+        var(--select-multiple-marginLeft);
 
       &:hover {
         background-color: var(--Form-selectValue-onHover-bgColor);
@@ -29,7 +38,6 @@
     .#{$ns}Select-valueLabel {
       display: inline-block;
       max-width: var(--Form-valueLabel-maxWidth);
-      padding: 0 var(--gap-xs);
       overflow: hidden;
       vertical-align: top;
       text-overflow: ellipsis;
@@ -45,24 +53,38 @@
   align-items: center;
   outline: none;
   position: relative;
-  font-size: var(--Form-input-fontSize);
-  border: var(--Form-select-borderWidth) solid var(--Form-select-borderColor);
+  font-size: var(--select-base-default-fontSize);
+  font-weight: var(--select-base-default-fontWeight);
+  border-width: var(--Form-select-borderWidth);
+  border-style: var(--select-base-default-top-border-style)
+    var(--select-base-default-right-border-style)
+    var(--select-base-default-bottom-border-style)
+    var(--select-base-default-left-border-style);
+  border-color: var(--Form-select-borderColor);
   background: var(--Form-select-bg);
   border-radius: var(--Form-select-borderRadius);
   min-height: var(--Form-selectOption-height);
-  $paddingY: calc(
-    (
-        var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
-          var(--Form-input-fontSize) - var(--Form-select-borderWidth) * 2
-      ) / 2
-  );
-  padding: $paddingY 0 $paddingY var(--Form-select-paddingX);
+  padding: var(--select-base-default-paddingTop)
+    var(--select-base-default-paddingRight)
+    var(--select-base-default-paddingBottom)
+    var(--select-base-default-paddingLeft);
   cursor: pointer;
   color: var(--Form-select-color);
 
   &:hover {
     background: var(--Form-select-onHover-bg);
-    border-color: var(--Form-input-onHover-borderColor);
+    border-width: var(--select-base-hover-top-border-width)
+      var(--select-base-hover-right-border-width)
+      var(--select-base-hover-bottom-border-width)
+      var(--select-base-hover-left-border-width);
+    border-style: var(--select-base-hover-top-border-style)
+      var(--select-base-hover-right-border-style)
+      var(--select-base-hover-bottom-border-style)
+      var(--select-base-hover-left-border-style);
+    border-color: var(--select-base-hover-top-border-color)
+      var(--select-base-hover-right-border-color)
+      var(--select-base-hover-bottom-border-color)
+      var(--select-base-hover-left-border-color);
 
     .#{$ns}Select-arrow:before {
       color: var(--Form-select-caret-onHover-iconColor);
@@ -70,13 +92,55 @@
   }
 
   &:active {
-    border-color: var(--Button--default-onActive-border);
+    border-width: var(--select-base-active-top-border-width)
+      var(--select-base-active-right-border-width)
+      var(--select-base-active-bottom-border-width)
+      var(--select-base-active-left-border-width);
+    border-style: var(--select-base-active-top-border-style)
+      var(--select-base-active-right-border-style)
+      var(--select-base-active-bottom-border-style)
+      var(--select-base-active-left-border-style);
+    border-color: var(--select-base-active-top-border-color)
+      var(--select-base-active-right-border-color)
+      var(--select-base-active-bottom-border-color)
+      var(--select-base-active-left-border-color);
+    box-shadow: var(--select-base-active-shadow);
+    background: var(--select-base-active-bg-color);
+  }
+
+  &.is-focused:not(.is-mobile),
+  &.is-opened:not(.is-mobile) {
+    border-width: var(--select-base-active-top-border-width)
+      var(--select-base-active-right-border-width)
+      var(--select-base-active-bottom-border-width)
+      var(--select-base-active-left-border-width);
+    border-style: var(--select-base-active-top-border-style)
+      var(--select-base-active-right-border-style)
+      var(--select-base-active-bottom-border-style)
+      var(--select-base-active-left-border-style);
+    border-color: var(--select-base-active-top-border-color)
+      var(--select-base-active-right-border-color)
+      var(--select-base-active-bottom-border-color)
+      var(--select-base-active-left-border-color);
+    box-shadow: var(--select-base-active-shadow);
+    background: var(--select-base-active-bg-color);
+    color: var(--Form-select-onFocused-color);
   }
 
   &.is-disabled {
-    color: var(--text--muted-color);
-    background: var(--Form-input-onDisabled-bg);
-    border-color: var(--Form-input-onDisabled-borderColor);
+    border-width: var(--select-base-disabled-top-border-width)
+      var(--select-base-disabled-right-border-width)
+      var(--select-base-disabled-bottom-border-width)
+      var(--select-base-disabled-left-border-width);
+    border-style: var(--select-base-disabled-top-border-style)
+      var(--select-base-disabled-right-border-style)
+      var(--select-base-disabled-bottom-border-style)
+      var(--select-base-disabled-left-border-style);
+    border-color: var(--select-base-disabled-top-border-color)
+      var(--select-base-disabled-right-border-color)
+      var(--select-base-disabled-bottom-border-color)
+      var(--select-base-disabled-left-border-color);
+    background: var(--select-base-disabled-bg-color);
   }
 
   &:focus {
@@ -87,12 +151,10 @@
     margin-top: px2rem(4px);
     .#{$ns}Select-menu {
       .#{$ns}Select-option {
-        height: px2rem(32px);
-        line-height: px2rem(32px);
+        line-height: var(--select-base-default-option-line-height);
       }
       .#{$ns}Select-addBtn {
-        height: px2rem(32px);
-        line-height: px2rem(30px);
+        line-height: var(--select-base-default-option-line-height);
       }
     }
   }
@@ -123,9 +185,6 @@
   }
 
   &-value {
-    line-height: calc(
-      var(--Form-input-lineHeight) * var(--Form-input-fontSize)
-    );
     white-space: nowrap;
     max-width: 100%;
     overflow: hidden;
@@ -142,7 +201,10 @@
   &--multi {
     height: auto;
     min-height: var(--Form-selectOption-height);
-    padding: var(--gap-xs) 0 var(--gap-xs) var(--gap-xs);
+    padding: var(--select-base-default-paddingTop)
+      var(--select-base-default-paddingRight)
+      var(--select-base-default-paddingBottom)
+      var(--select-base-default-paddingLeft);
 
     .#{$ns}Select-valueWrap {
       > input {
@@ -163,7 +225,7 @@
   }
   &-valueIcon {
     cursor: pointer;
-    padding: 1px 5px;
+    margin-left: px2rem(10px);
     color: var(--Form-select-valueIcon-color);
 
     &:hover {
@@ -184,9 +246,6 @@
   }
 
   &-arrow {
-    margin-right: px2rem(12px);
-    // margin-right: var(--gap-xs);
-    // margin-left: var(--gap-xs);
     width: var(--gap-md);
     text-align: center;
     display: flex;
@@ -285,14 +344,16 @@
   &-option {
     cursor: pointer;
     // min-width: px2rem(120px);
-    padding: calc(
-        (
-            var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--Form-select-paddingX);
+    padding: var(--select-base-default-option-paddingTop)
+      var(--select-base-default-option-paddingRight)
+      var(--select-base-default-option-paddingBottom)
+      var(--select-base-default-option-paddingLeft);
     display: flex;
+    color: var(--select-base-default-option-color);
+    font-size: var(--select-base-default-option-fontSize);
+    font-weight: var(--select-base-default-option-fontWeight);
+    background: var(--select-base-default-option-bg-color);
+    line-height: var(--select-base-default-option-line-height);
 
     &-checkbox {
       width: 100%;
@@ -318,6 +379,9 @@
           overflow: hidden;
           white-space: nowrap;
           width: 100%;
+          font-size: var(--select-base-default-option-fontSize);
+          font-weight: var(--select-base-default-option-fontWeight);
+          color: var(--select-base-default-option-color);
         }
       }
     }
@@ -325,16 +389,28 @@
     &.is-active {
       color: var(--Form-select-menu-onActive-color);
       background: var(--Form-select-menu-onActive-bg);
+
+      .#{$ns}Select-option-checkbox > label > span {
+        color: var(--Form-select-menu-onActive-color);
+      }
     }
 
     &.is-highlight {
       color: var(--Form-select-menu-onHover-color);
       background: var(--Form-select-menu-onHover-bg);
+
+      .#{$ns}Select-option-checkbox > label > span {
+        color: var(--Form-select-menu-onHover-color);
+      }
     }
 
     &.is-disabled {
       color: var(--Form-select-menu-onDisabled-color);
       background: var(--Form-select-menu-onDisabled-bg);
+
+      .#{$ns}Select-option-checkbox > label > span {
+        color: var(--Form-select-menu-onDisabled-color);
+      }
     }
 
     > label {
@@ -383,13 +459,10 @@
   &-addBtn {
     display: block;
     cursor: pointer;
-    padding: calc(
-        (
-            var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--Form-select-paddingX);
+    padding: var(--select-base-default-option-paddingTop)
+      var(--select-base-default-option-paddingRight)
+      var(--select-base-default-option-paddingBottom)
+      var(--select-base-default-option-paddingLeft);
 
     &:hover {
       text-decoration: none;
@@ -402,12 +475,6 @@
     }
   }
 
-  &.is-focused:not(.is-mobile),
-  &.is-opened:not(.is-mobile) {
-    border-color: var(--Form-input-onFocused-borderColor);
-    color: var(--Form-select-onFocused-color);
-  }
-
   &-spinner {
     line-height: calc(
       var(--Form-input-lineHeight) * var(--Form-input-fontSize)
@@ -523,13 +590,13 @@
           &:hover {
             background-color: transparent;
             .#{$ns}Tree-itemText {
-              background: var(--Transfer-title-bg);
+              background: var(--select-tree-hover-bg-color);
             }
           }
           &:active {
             background-color: transparent;
             .#{$ns}Tree-itemText {
-              background: var(--Tree-item-onChekced-bg);
+              background: var(--select-tree-active-bg-color);
             }
           }
           &.is-checked {

package/scss/components/form/_selection.scss

@@ -48,23 +48,25 @@
   padding: var(--gap-xs) 0;
 
   &-group > &-itemLabel {
-    height: px2rem(32px);
-    padding: var(--gap-xs) var(--gap-base);
-    color: var(--FileControl-icon-color);
+    padding: var(--select-group-paddingTop) var(--select-group-paddingRight)
+      var(--select-group-paddingBottom) var(--select-group-paddingLeft);
+    color: var(--select-group-color);
+    font-size: var(--select-group-fontSize);
+    font-weight: var(--select-group-fontWeight);
+    line-height: var(--select-group-lineHeight);
   }
 
   &-item {
     display: flex;
-    // height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
+    color: var(--select-base-default-option-color);
+    background: var(--select-base-default-option-bg-color);
+    line-height: var(--select-base-default-option-line-height);
+    font-size: var(--select-base-default-option-fontSize);
+    font-weight: var(--select-base-default-option-fontWeight);
+    padding: var(--select-base-default-option-paddingTop)
+      var(--select-base-default-option-paddingRight)
+      var(--select-base-default-option-paddingBottom)
+      var(--select-base-default-option-paddingLeft);
     flex-direction: row;
 
     > .#{$ns}Checkbox {
@@ -73,21 +75,26 @@
     cursor: pointer;
     user-select: none;
 
-    &.is-active {
-      background: var(--Form-select-menu-onActive-bg);
-    }
-
     &:hover {
-      background: var(--Tree-item-onHover-bg);
+      color: var(--Form-select-menu-onHover-color);
+      background: var(--Form-select-menu-onHover-bg);
 
       i {
         border: 1px solid var(--menu-active-color);
       }
     }
 
+    &.is-active,
+    &.is-focused,
+    &.is-opened {
+      color: var(--Form-select-menu-onActive-color);
+      background: var(--Form-select-menu-onActive-bg);
+    }
+
     &.is-disabled {
       pointer-events: none;
-      color: var(--text--muted-color);
+      color: var(--Form-select-menu-onDisabled-color);
+      background: var(--Form-select-menu-onDisabled-bg);
     }
   }
 
@@ -142,30 +149,43 @@
 
   .#{$ns}Table-table > thead > tr > th,
   .#{$ns}Table-table > tbody > tr > td {
-    font-size: var(--fontSizeSm);
-    padding-top: var(--gap-xs);
-    padding-bottom: px2rem(6px);
+    color: var(--select-table-color);
+    font-size: var(--select-table-fontSize);
     vertical-align: middle;
   }
 
   .#{$ns}Table-table > thead > tr > th {
-    padding-top: px2rem(6px);
+    padding: var(--select-table-header-paddingTop)
+      var(--select-table-header-paddingLeft)
+      var(--select-table-header-paddingBottom)
+      var(--select-table-header-paddingLeft);
+  }
+
+  .#{$ns}Table-table > tbody > tr > td {
+    padding: var(--select-table-option-paddingTop)
+      var(--select-table-option-paddingLeft)
+      var(--select-table-option-paddingBottom)
+      var(--select-table-option-paddingLeft);
   }
 
-  .#{$ns}Table-table > thead > tr > th:first-child,
-  .#{$ns}Table-table > tbody > tr > td:first-child {
-    padding-left: px2rem(10px);
+  .#{$ns}Table-table > thead > tr > th:last-child {
+    padding-right: var(--select-table-header-paddingRight);
   }
 
-  .#{$ns}Table-table > thead > tr > th:last-child,
   .#{$ns}Table-table > tbody > tr > td:last-child {
-    padding-right: var(--gap-md);
+    padding-right: var(--select-table-option-paddingRight);
   }
 
-  .#{$ns}Table-table > tbody > tr.is-active {
+  .#{$ns}Table-table > tbody > tr.is-active > td {
     color: var(--Form-select-menu-onActive-color);
     background: var(--Form-select-menu-onActive-bg);
   }
+
+  .#{$ns}Table-table > tbody > tr:hover > td,
+  .#{$ns}Table-table > tbody > tr.is-hovered > td {
+    color: var(--Form-select-menu-onHover-color);
+    background: var(--Form-select-menu-onHover-bg);
+  }
 }
 
 .#{$ns}TreeSelection {
@@ -270,15 +290,15 @@
   &-item {
     display: flex;
     // height: var(--Form-input-height);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            var(--Form-input-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
+    font-size: var(--select-base-default-option-fontSize);
+    font-weight: var(--select-base-default-option-fontWeight);
+    color: var(--select-base-default-option-color);
+    background: var(--select-base-default-option-bg-color);
+    line-height: var(--select-base-default-option-line-height);
+    padding: var(--select-base-default-option-paddingTop)
+      var(--select-base-default-option-paddingRight)
+      var(--select-base-default-option-paddingBottom)
+      var(--select-base-default-option-paddingLeft);
     flex-direction: row;
 
     > .#{$ns}Checkbox {
@@ -293,12 +313,14 @@
     }
 
     &:hover {
-      background: var(--Tree-item-onHover-bg);
+      color: var(--Form-select-menu-onHover-color);
+      background: var(--Form-select-menu-onHover-bg);
     }
 
     &.is-disabled {
       pointer-events: none;
-      color: var(--text--muted-color);
+      color: var(--Form-select-menu-onDisabled-color);
+      background: var(--Form-select-menu-onDisabled-bg);
     }
   }
 

package/scss/components/form/_tag.scss

@@ -1,10 +1,6 @@
 .#{$ns}TagControl {
   position: relative;
 
-  &-input.is-focused {
-    border-radius: 0;
-  }
-
   &-input.is-disabled {
     border-style: dashed;
     background: transparent;

package/scss/components/form/_text.scss

@@ -12,6 +12,7 @@
   .#{$ns}TextControl-clear svg {
     font-size: var(--input-clearable-icon-size);
     fill: var(--input-clearable-default-color);
+    color: var(--input-clearable-default-color);
     width: var(--input-clearable-icon-size);
     height: var(--input-clearable-icon-size);
     &:hover {
@@ -154,6 +155,13 @@
   &--withAddOn {
     display: flex;
     flex-wrap: nowrap;
+    &:hover {
+      .#{$ns}TextControl-input,
+      .#{$ns}Button,
+      .#{$ns}TextControl-addOn {
+        border-color: var(--Form-input-onHover-borderColor);
+      }
+    }
 
     @include media-breakpoint-up(sm) {
       &.#{$ns}Form-control--sizeXs,
@@ -169,7 +177,8 @@
     }
   }
 
-  &--withAddOn > &-input {
+  &--withAddOn > &-input,
+  &--withAddOn.is-focused > &-input {
     flex-basis: 1;
     flex-grow: 1;
     min-width: 0;
@@ -217,6 +226,8 @@
 
     &:first-child {
       border-left-width: var(--input-addon-text-left-border-width);
+      border-top-left-radius: var(--Form-input-borderRadius);
+      border-bottom-left-radius: var(--Form-input-borderRadius);
     }
 
     &:last-child {
@@ -231,8 +242,7 @@
       position: relative;
       border-radius: 0;
       margin-left: px2rem(-1px);
-      border: var(--InputGroup-button-borderWidth) solid
-        var(--InputGroup-button-borderColor);
+      transition: none;
     }
 
     &:not(:last-child) .#{$ns}Button {

package/scss/components/form/_tree.scss

@@ -2,7 +2,7 @@
   border: 1px solid var(--Form-input-borderColor);
   padding: 6px 12px;
   border-radius: 2px;
-  max-height: 300px;
+  max-height: var(--Tree-max-height);
   overflow: auto;
 
   &.h-full {
@@ -13,6 +13,25 @@
   &.no-border {
     border: 0;
   }
+
+  &.is-sticky {
+    max-height: unset;
+    overflow: unset;
+  }
+
+  &-searchbox {
+    margin-top: var(--gap-sm);
+    margin-bottom: var(--gap-md);
+
+    &.is-active {
+      width: 100%;
+    }
+  }
+
+  & > .#{$ns}Tree {
+    max-height: var(--Tree-max-height);
+    overflow: auto;
+  }
 }
 
 .#{$ns}Tree {
@@ -303,7 +322,8 @@
     cursor: pointer;
     flex: 1 auto;
     display: inline-block;
-    color: var(--Form-input-color);
+    color: var(--select-tree-color);
+    font-size: var(--select-tree-fontSize);
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;

package/scss/components/react-datetime.scss

@@ -62,7 +62,10 @@
   cursor: pointer;
   > span {
     display: inline-block;
-    border-radius: 2px;
+    border-radius: var(--inputDate-default-option-top-left-border-radius)
+      var(--inputDate-default-option-top-right-border-radius)
+      var(--inputDate-default-option-bottom-right-border-radius)
+      var(--inputDate-default-option-bottom-left-border-radius);
     height: 24px;
     width: 24px;
   }
@@ -77,7 +80,10 @@
 }
 .rdtPicker td.rdtOld,
 .rdtPicker td.rdtNew {
-  color: #b8babf;
+  color: var(--inputDate-disabled-option-color);
+  span {
+    background: var(--inputDate-disabled-option-bg-color);
+  }
 }
 .rdtPicker td.rdtToday {
   position: relative;

package/scss/themes/_antd-variables.scss

@@ -69,12 +69,12 @@ $ns: 'antd-';
   --colors-brand-2: #003a8c;
   --colors-brand-3: #0050b3;
   --colors-brand-4: #096dd9;
-  --colors-brand-5: #1890ff;
+  --colors-brand-5: #1677ff;
   --colors-brand-6: #45a8ff;
   --colors-brand-7: #74c0ff;
   --colors-brand-8: #a2d7ff;
   --colors-brand-9: #d1ecff;
-  --colors-brand-10: #e6f5ff;
+  --colors-brand-10: #fafafa;
   --colors-neutral-text-1: #070e14;
   --colors-neutral-text-2: #151e26;
   --colors-neutral-text-3: #303840;
@@ -88,7 +88,7 @@ $ns: 'antd-';
   --colors-neutral-text-11: #ffffff;
   --colors-neutral-fill-none: transparent;
   --colors-neutral-fill-1: #070e14;
-  --colors-neutral-fill-2: #151e26;
+  --colors-neutral-fill-2: #001529;
   --colors-neutral-fill-3: #303840;
   --colors-neutral-fill-4: #5c6166;
   --colors-neutral-fill-5: #84888c;
@@ -143,7 +143,7 @@ $ns: 'antd-';
   --borders-width-4: 4px;
   --borders-radius-1: 0px;
   --borders-radius-2: 1px;
-  --borders-radius-3: 2px;
+  --borders-radius-3: 6px;
   --borders-radius-4: 6px;
   --borders-radius-5: 8px;
   --borders-radius-6: 10px;
@@ -151,11 +151,11 @@ $ns: 'antd-';
   --sizes-size-0: 0rem;
   --sizes-size-1: auto;
   --sizes-size-2: 0.125rem;
-  --sizes-size-3: 0.25rem;
+  --sizes-size-3: 4px;
   --sizes-size-4: 0.375rem;
   --sizes-size-5: 0.5rem;
   --sizes-size-6: 0.625rem;
-  --sizes-size-7: 0.75rem;
+  --sizes-size-7: 15px;
   --sizes-size-8: 0.875rem;
   --sizes-size-9: 1rem;
   --sizes-base-1: 0.125rem;
@@ -219,4 +219,18 @@ $ns: 'antd-';
   --shadows-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
     0px 10px 10px -5px rgba(0, 0, 0, 0.04);
   --shadows-shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  // input 激活时的 shadow
+  --input-default-active-shadow: 0 0 0 2px rgb(5 145 255 / 10%);
+
+  // 左侧导航样式，基于暗色模式
+  --Layout-aside-onAcitve-bg: rgb(24, 144, 255);
+  --Layout-asideLink-onActive-color: #fff;
+  --Layout-asideLink-color: hsla(0, 0%, 100%, 0.75);
+  --Layout-aside-subList-bg: #000c17;
+
+  // 表格
+  --Table-thead-bg: #fafafa;
+  --Table-onChecked-bg: rgb(220, 244, 255);
+  --Table-onChecked-color: rgba(0, 0, 0, 0.85);
 }