amis-ui 2.9.0 → 3.0.0

package/scss/components/_timeline.scss

@@ -70,14 +70,16 @@
 
       .#{$ns}TimelineItem-time {
         color: var(--TimelineItem--text-secondary-color);
-        font-size: var(--Timeline--font-size);
+        font-size: var(--Timeline-time-fontSize);
+        font-weight: var(--Timeline-time-fontWeight);
         margin-bottom: var(--TimelineItem--content-time-margin-bottom);
       }
 
       .#{$ns}TimelineItem-title {
         display: flex;
         color: var(--TimelineItem--text-primary-color);
-        font-size: var(--Timeline--font-size);
+        font-size: var(--Timeline-title-fontSize);
+        font-weight: var(--Timeline-title-fontWeight);
         margin-bottom: var(--TimelineItem--content-title-margin-bottom);
         .#{$ns}PlainField {
           padding-right: var(--TimelineItem-custem-time-padding-right);
@@ -92,12 +94,13 @@
           display: flex;
           cursor: pointer;
           align-items: center;
-          font-size: var(--Timeline--font-size);
+          font-size: var(--Timeline-detail-label-fontSize);
           color: var(--TimelineItem--detail-button-color);
+          font-weight: var(--Timeline-detail-label-fontWeight);
           margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
         }
-
         .#{$ns}TimelineItem-detail-arrow {
+          color: var(--Timeline-detail-icon-color);
           width: var(--TimelineItem-detail-arrow-width);
           height: var(--TimelineItem-detail-arrow-width);
         }
@@ -110,7 +113,9 @@
           display: block;
           border-radius: var(--Timeline-visible-border-radius);
           max-width: var(--TimelineItem-detail-visible-max-width);
-          font-size: var(--Timeline--font-size);
+          font-size: var(--Timeline-detail-content-fontSize);
+          font-weight: var(--Timeline-detail-content-fontWeight);
+          color: var(--Timeline-detail-content-color);
           padding: var(--TimelineItem-detail-visible-padding);
           box-shadow: var(--TimelineItem-detail-visible-shadow);
         }
@@ -212,13 +217,15 @@
 
       .#{$ns}TimelineItem-time {
         color: var(--TimelineItem--text-secondary-color);
-        font-size: var(--Timeline--font-size);
+        font-size: var(--Timeline-time-fontSize);
+        font-weight: var(--Timeline-time-fontWeight);
         margin-bottom: var(--TimelineItem--content-time-margin-bottom);
       }
 
       .#{$ns}TimelineItem-title {
         color: var(--TimelineItem--text-primary-color);
-        font-size: var(--Timeline--font-size);
+        font-size: var(--Timeline-title-fontSize);
+        font-weight: var(--Timeline-title-fontWeight);
         margin-bottom: var(--TimelineItem--content-title-margin-bottom);
       }
 
@@ -227,12 +234,14 @@
           display: flex;
           cursor: pointer;
           align-items: center;
-          font-size: var(--Timeline--font-size);
+          font-size: var(--Timeline-detail-label-fontSize);
           color: var(--TimelineItem--detail-button-color);
+          font-weight: var(--Timeline-detail-label-fontWeight);
           margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
         }
 
         .#{$ns}TimelineItem-detail-arrow {
+          color: var(--Timeline-detail-icon-color);
           width: var(--TimelineItem-detail-arrow-width);
           height: var(--TimelineItem-detail-arrow-width);
         }
@@ -245,7 +254,9 @@
           display: block;
           border-radius: var(--Timeline-visible-border-radius);
           max-width: var(--TimelineItem-detail-visible-max-width);
-          font-size: var(--Timeline--font-size);
+          font-size: var(--Timeline-detail-content-fontSize);
+          font-weight: var(--Timeline-detail-content-fontWeight);
+          color: var(--Timeline-detail-content-color);
           padding: var(--TimelineItem-detail-visible-padding);
           box-shadow: var(--TimelineItem-detail-visible-shadow);
         }

package/scss/components/_toast.scss

@@ -69,10 +69,12 @@
   pointer-events: auto;
   margin-bottom: var(--gap-xs);
 
-  padding: var(--Toast-paddingY) var(--Toast-paddingX);
-
+  padding: var(--Toast-paddingTop) var(--Toast-paddingRight)
+    var(--Toast-paddingBottom) var(--Toast-paddingLeft);
   box-shadow: var(--Toast-box-shadow);
-  border-radius: var(--Toast-borderRadius);
+  border-radius: var(--Toast-top-left-border-radius)
+    var(--Toast-top-right-border-radius) var(--Toast-bottom-right-border-radius)
+    var(--Toast-bottom-left-border-radius);
   border: var(--Toast-border-width) solid;
   color: var(--Toast-color);
   position: relative;
@@ -103,13 +105,12 @@
     height: var(--gap-xl);
     color: var(--Toast-close-color);
     margin-left: var(--gap-sm);
-    opacity: 0.8;
     align-items: center;
     cursor: pointer;
 
     &:hover {
+      font-size: var(--fontSizeLg);
       color: var(--Toast-close--onHover-color);
-      opacity: 1;
     }
 
     & > svg {
@@ -133,7 +134,6 @@
     }
 
     .#{$ns}Toast-body {
-      font-size: var(--fontSizeSm);
       display: inline-block;
       vertical-align: middle;
       white-space: pre-wrap;
@@ -166,26 +166,80 @@
   // colors
   &--error {
     color: var(--Toast--danger-color);
-    border-color: var(--Toast--danger-borderColor);
     background: var(--Toast--danger-bgColor);
+    font-size: var(--Toast--danger-fontSize);
+    font-weight: var(--Toast--danger-fontWeight);
+    background: var(--Toast--danger-bgColor);
+    border-width: var(--Toast--danger-top-border-width)
+      var(--Toast--danger-right-border-width)
+      var(--Toast--danger-bottom-border-width)
+      var(--Toast--danger-left-border-width);
+    border-style: var(--Toast--danger-top-border-style)
+      var(--Toast--danger-right-border-style)
+      var(--Toast--danger-bottom-border-style)
+      var(--Toast--danger-left-border-style);
+    border-color: var(--Toast--danger-top-border-color)
+      var(--Toast--danger-right-border-color)
+      var(--Toast--danger-bottom-border-color)
+      var(--Toast--danger-left-border-color);
   }
 
   &--warning {
     color: var(--Toast--warning-color);
-    border-color: var(--Toast--warning-borderColor);
     background: var(--Toast--warning-bgColor);
+    font-size: var(--Toast--warning-fontSize);
+    font-weight: var(--Toast--warning-fontWeight);
+    background: var(--Toast--warning-bgColor);
+    border-width: var(--Toast--warning-top-border-width)
+      var(--Toast--warning-right-border-width)
+      var(--Toast--warning-bottom-border-width)
+      var(--Toast--warning-left-border-width);
+    border-style: var(--Toast--warning-top-border-style)
+      var(--Toast--warning-right-border-style)
+      var(--Toast--warning-bottom-border-style)
+      var(--Toast--warning-left-border-style);
+    border-color: var(--Toast--warning-top-border-color)
+      var(--Toast--warning-right-border-color)
+      var(--Toast--warning-bottom-border-color)
+      var(--Toast--warning-left-border-color);
   }
 
   &--info {
     color: var(--Toast--info-color);
-    border-color: var(--Toast--info-borderColor);
+    font-size: var(--Toast--info-fontSize);
+    font-weight: var(--Toast--info-fontWeight);
     background: var(--Toast--info-bgColor);
+    border-width: var(--Toast--info-top-border-width)
+      var(--Toast--info-right-border-width)
+      var(--Toast--info-bottom-border-width)
+      var(--Toast--info-left-border-width);
+    border-style: var(--Toast--info-top-border-style)
+      var(--Toast--info-right-border-style)
+      var(--Toast--info-bottom-border-style)
+      var(--Toast--info-left-border-style);
+    border-color: var(--Toast--info-top-border-color)
+      var(--Toast--info-right-border-color)
+      var(--Toast--info-bottom-border-color)
+      var(--Toast--info-left-border-color);
   }
 
   &--success {
     color: var(--Toast--success-color);
-    border-color: var(--Toast--success-borderColor);
+    font-size: var(--Toast--success-fontSize);
+    font-weight: var(--Toast--success-fontWeight);
     background: var(--Toast--success-bgColor);
+    border-width: var(--Toast--success-top-border-width)
+      var(--Toast--success-right-border-width)
+      var(--Toast--success-bottom-border-width)
+      var(--Toast--success-left-border-width);
+    border-style: var(--Toast--success-top-border-style)
+      var(--Toast--success-right-border-style)
+      var(--Toast--success-bottom-border-style)
+      var(--Toast--success-left-border-style);
+    border-color: var(--Toast--success-top-border-color)
+      var(--Toast--success-right-border-color)
+      var(--Toast--success-bottom-border-color)
+      var(--Toast--success-left-border-color);
   }
 
   // positions
@@ -226,11 +280,9 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
-
 }
 
 .#{$ns}Toast-mobile {
-
   .#{$ns}Toast {
     background-color: rgba($color: #000000, $alpha: 0.9);
     border-radius: px2rem(4px);

package/scss/components/_wizard.scss

@@ -56,11 +56,11 @@
       //     background: var(--dark);
       // }
       &.is-active {
-        color: var(--white);
+        color: var(--Wizard-badge-onActive-color);
         background: var(--Wizard-badge-onActive-backgroundColor);
       }
       &.is-complete {
-        color: var(--white);
+        color: var(--Wizard-badge-onComplete-color);
         background: var(--Wizard-badge-onComplete-backgroundColor);
       }
     }
@@ -84,7 +84,7 @@
         float: left;
         padding: 0 var(--gap-md) 0 px2rem(25px);
         margin: 0;
-        color: #999999;
+        color: var(--Wizard-step-color);
         cursor: pointer;
         height: var(--Wizard-steps-height);
         line-height: var(--Wizard-steps-height);
@@ -127,7 +127,7 @@
 
         &.is-active {
           color: var(--Wizard-steps-li-onActive-color);
-          background: #fff;
+          background: var(--Wizard-steps-li-onActive-bg);
         }
 
         &.is-active:after {
@@ -160,7 +160,8 @@
         float: left;
         padding: 0 var(--gap-md) 0 px2rem(25px);
         margin: 0;
-        color: #999999;
+        font-size: var(--Wizard-step-fontSize);
+        color: var(--Wizard-step-color);
         cursor: default;
         height: var(--Wizard-steps-height);
         line-height: var(--Wizard-steps-height);
@@ -178,6 +179,7 @@
           bottom: 0;
           right: px2rem(-10px);
           z-index: 2;
+          color: var(--Wizard-after-color);
         }
 
         &:after {
@@ -191,7 +193,11 @@
           background: var(--Wizard-steps-li-onActive-bg);
         }
 
-        &.is-active:after {
+        &.is-active:after,
+        &.is-complete:after,
+        &.is-active:before,
+        &.is-complete:before {
+          color: var(--Wizard-after-onActive-color);
           border-left-color: var(--Wizard-steps-li-onActive-arrow-bg);
         }
 
@@ -248,7 +254,7 @@
           padding-left: var(--gap-md);
 
           &.is-active {
-            background: #fff;
+            background: var(--Wizard-steps-li-onActive-bg);
           }
         }
       }

package/scss/components/form/_checks.scss

@@ -36,7 +36,8 @@
       margin-left: var(--gap-sm);
       cursor: pointer;
       display: inline-block;
-      vertical-align: baseline;
+      vertical-align: top;
+      line-height: var(--checkbox-checkbox-default-lineHeight);
 
       > a {
         // float: right;
@@ -69,8 +70,16 @@
 
   &--checkbox {
     padding-left: var(--Checkbox-size);
+    font-weight: var(--checkbox-checkbox-default-fontWeight);
     font-size: var(--checkbox-checkbox-default-fontSize);
-    color: var(--checkbox-checkbox-default-color);
+    color: var(--checkbox-checkbox-default-text-color);
+
+    &:hover {
+      color: var(--checkbox-checkbox-hover-text-color);
+    }
+    &:active {
+      color: var(--checkbox-checkbox-active-text-color);
+    }
 
     input {
       margin-left: calc(var(--Checkbox-size) * -1);
@@ -131,7 +140,7 @@
 
       &[disabled] + i + span {
         cursor: not-allowed;
-        color: var(--text--muted-color);
+        color: var(--checkbox-checkbox-disabled-text-color);
       }
     }
 
@@ -454,11 +463,16 @@
     border-color: var(--Checkbox-color);
     &:hover {
       border-color: var(--Checkbox-color) !important;
+      box-shadow: -1px 0 0 0 var(--Checkbox-color) !important;
+      &:first-child {
+        box-shadow: none !important;
+      }
     }
   }
   &--button--disabled--checked.#{$ns}Checkbox--checkbox {
     background: var(--Checkbox-onDisabled-bg);
     border-color: var(--Checkbox-color) !important;
+    box-shadow: none !important;
     &:hover {
       border-color: var(--Checkbox-color) !important;
     }

package/scss/components/form/_color.scss

@@ -44,6 +44,11 @@
     box-shadow: var(--Form-input-boxShadow);
   }
 
+  .is-error > & {
+    border-color: var(--Form-input-onError-borderColor);
+    background: var(--Form-input-onError-bg);
+  }
+
   &.is-disabled {
     background: var(--ColorPicker-onDisabled-bg);
     color: var(--ColorPicker-onDisabled-color);

package/scss/components/form/_combo.scss

@@ -32,15 +32,15 @@
       var(--Combo-addBtn-fontSize),
       var(--Combo-addBtn-fontWeight),
       var(--Combo-addBtn-lineHeight),
-      var(--Combo-addBtn-borderRadius),
-      var(--Combo-addBtn-borderRadius),
-      var(--Combo-addBtn-borderRadius),
-      var(--Combo-addBtn-borderRadius),
+      var(--combo-multi-addBtn-top-left-border-radius),
+      var(--combo-multi-addBtn-top-right-border-radius),
+      var(--combo-multi-addBtn-bottom-right-border-radius),
+      var(--combo-multi-addBtn-bottom-left-border-radius),
       var(--Combo-addBtn-height),
-      var(--Combo-addBtn-paddingY),
-      var(--Combo-addBtn-paddingY),
-      var(--Combo-addBtn-paddingX),
-      var(--Combo-addBtn-paddingX)
+      var(--combo-multi-addBtn-paddingTop),
+      var(--combo-multi-addBtn-paddingBottom),
+      var(--combo-multi-addBtn-paddingLeft),
+      var(--combo-multi-addBtn-paddingRight)
     );
 
     @include button-variant(
@@ -98,16 +98,16 @@
   }
 
   &-delBtn {
-    color: var(--icon-color);
+    color: var(--combo-multi-delBtn-color);
     cursor: pointer;
 
     &:hover {
-      color: var(--icon-onHover-color);
+      color: var(--combo-multi-delBtn-hover-color);
     }
   }
 
   &-tab-delBtn {
-    color: var(--icon-color);
+    color: var(--combo-multi-delBtn-color);
     cursor: pointer;
     margin-left: var(--gap-sm);
     display: inline-block;
@@ -118,7 +118,7 @@
     }
 
     &:hover {
-      color: var(--icon-onHover-color);
+      color: var(--combo-multi-delBtn-hover-color);
     }
   }
 
@@ -137,7 +137,7 @@
   }
 
   &-item {
-    background: var(--Page-main-bg);
+    background: var(--combo-bg-color);
   }
 
   &-itemDrager {
@@ -239,10 +239,13 @@
     // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad.
     > .#{$ns}Combo-item,
     > .#{$ns}Combo-items > .#{$ns}Combo-item {
-      border: var(--Combo--vertical-item-borderWidth) dashed
-        var(--Combo--vertical-item-borderColor);
-      padding: var(--Combo--vertical-item-paddingY)
-        var(--Combo--vertical-item-paddingX);
+      border-color: var(--Combo--vertical-item-borderColor);
+      border-width: var(--Combo--vertical-item-borderWidth);
+      border-style: var(--Combo--vertical-item-borderStyle);
+      border-radius: var(--Combo--vertical-item-borderRadius);
+      padding: var(--combo-vertical-paddingTop)
+        var(--combo-vertical-paddingRight) var(--combo-vertical-paddingBottom)
+        var(--combo-vertical-paddingLeft);
       position: relative;
     }
 
@@ -260,7 +263,14 @@
     &:not(.is-disabled) > .#{$ns}Combo-item:hover,
     &:not(.is-disabled) > .#{$ns}Combo-items > .#{$ns}Combo-item:hover {
       border-color: var(--Combo--vertical-item-onHover-borderColor);
-      // border-style: solid;
+      border-width: var(--combo-vertical-hover-top-border-width)
+        var(--combo-vertical-hover-right-border-width)
+        var(--combo-vertical-hover-bottom-border-width)
+        var(--combo-vertical-hover-left-border-width);
+      border-style: var(--combo-vertical-hover-top-border-style)
+        var(--combo-vertical-hover-right-border-style)
+        var(--combo-vertical-hover-bottom-border-style)
+        var(--combo-vertical-hover-left-border-style);
 
       > .#{$ns}Combo-delBtn,
       > .#{$ns}Combo-delController {

package/scss/components/form/_date-range.scss

@@ -64,6 +64,11 @@
     }
   }
 
+  .is-error > & {
+    border-color: var(--Form-input-onError-borderColor);
+    background: var(--Form-input-onError-bg);
+  }
+
   .#{$ns}DateRangePicker-input {
     border: none;
     border-bottom: var(--DateRangePicker-activeCursor-height) solid transparent;

package/scss/components/form/_date.scss

@@ -88,6 +88,11 @@
     }
   }
 
+  .is-error > & {
+    border-color: var(--Form-input-onError-borderColor);
+    background: var(--Form-input-onError-bg);
+  }
+
   &.is-disabled {
     background: var(--inputDate-disabled-bg-color);
     border-width: var(--inputDate-disabled-top-border-width)
@@ -779,7 +784,9 @@ td.rdtQuarter {
 
 .#{$ns}DateCalendar {
   display: inline-block;
-  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
+  border-width: var(--DatePicker-borderWidth);
+  border-style: var(--DatePicker-borderStyle);
+  border-color: var(--DatePicker-borderColor);
   background: var(--DatePicker-bg);
   border-radius: var(--DatePicker-borderRadius);
 }

package/scss/components/form/_fieldset.scss

@@ -33,14 +33,15 @@
 fieldset.#{$ns}Collapse {
   border: none;
   > legend {
-    font-weight: var(--fontWeightNormal);
-    padding: var(--gap-xs) 0;
-    font-size: var(--fontSizeMd);
-    color: var(--text--loud-color);
-    border-left: var(--primary) px2rem(4px) solid;
-    line-height: 1.2;
-    margin: var(--gap-base) 0;
-    padding: 0 0 0 14px;
+    border-left: var(--fieldSet-legend-border-color)
+      var(--fieldSet-legend-border-width) solid;
+    height: var(--fieldSet-legend-height);
+    line-height: var(--fieldSet-legend-height);
+    margin: var(--fieldSet-legend-marginTop) var(--fieldSet-legend-marginRight)
+      var(--fieldSet-legend-marginBottom) var(--fieldSet-legend-marginLeft);
+    padding: var(--fieldSet-legend-paddingTop)
+      var(--fieldSet-legend-paddingRight) var(--fieldSet-legend-paddingBottom)
+      var(--fieldSet-legend-paddingLeft);
     cursor: pointer;
     border-bottom: none !important;
     background: transparent;
@@ -48,6 +49,13 @@ fieldset.#{$ns}Collapse {
     flex-direction: row-reverse;
     justify-content: flex-end;
     // width: 100%;
+
+    .#{$ns}TplField {
+      font-weight: var(--fieldSet-legend-fontWeight);
+      font-size: var(--fieldSet-legend-fontSize);
+      color: var(--fieldSet-legend-color);
+    }
+
     &:hover {
       background: transparent;
     }
@@ -55,103 +63,129 @@ fieldset.#{$ns}Collapse {
 
   &--xs {
     @extend %fieldSetBase;
-    padding: 20px 5px 5px 5px;
+    padding: var(--fieldSet-size-xs-paddingTop)
+      var(--fieldSet-size-xs-paddingRight) var(--fieldSet-size-xs-paddingBottom)
+      var(--fieldSet-size-xs-paddingLeft);
 
     > legend {
-      left: 5px;
-      font-size: var(--fontSizeXs);
+      left: var(--fieldSet-size-xs-paddingLeft);
       padding: 0 3px;
       margin: 0 0 0 -3px;
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-xs-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 6px;
+      top: calc(var(--fieldSet-size-xs-fontSize) / 2);
     }
   }
 
   &--sm {
     @extend %fieldSetBase;
 
-    padding: 25px 10px 10px 10px;
+    padding: var(--fieldSet-size-sm-paddingTop)
+      var(--fieldSet-size-sm-paddingRight) var(--fieldSet-size-sm-paddingBottom)
+      var(--fieldSet-size-sm-paddingLeft);
 
     > legend {
-      left: 10px;
-      font-size: var(--fontSizeSm);
+      left: var(--fieldSet-size-sm-paddingLeft);
       padding: 0 5px;
       margin: 0 0 0 -5px;
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-sm-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 6px;
+      top: calc(var(--fieldSet-size-sm-fontSize) / 2);
     }
   }
 
   &--base {
     @extend %fieldSetBase;
 
-    padding: 30px var(--gap-md) var(--gap-md) var(--gap-md);
+    padding: var(--fieldSet-size-base-paddingTop)
+      var(--fieldSet-size-base-paddingRight)
+      var(--fieldSet-size-base-paddingBottom)
+      var(--fieldSet-size-base-paddingLeft);
 
     > legend {
-      left: var(--gap-md);
-      font-size: var(--fontSizeBase);
+      left: var(--fieldSet-size-base-paddingLeft);
       padding: 0 8px;
       margin: 0 0 0 -8px;
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-base-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 7px;
+      top: calc(var(--fieldSet-size-base-fontSize) / 2);
     }
   }
 
   &--md {
     @extend %fieldSetBase;
-    padding: 30px 20px 20px 20px;
+    padding: var(--fieldSet-size-md-paddingTop)
+      var(--fieldSet-size-md-paddingRight) var(--fieldSet-size-md-paddingBottom)
+      var(--fieldSet-size-md-paddingLeft);
 
     > legend {
-      left: 20px;
-      font-size: var(--fontSizeMd);
+      left: var(--fieldSet-size-md-paddingLeft);
       padding: 0 10px;
       margin: 0 0 0 -10px;
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-md-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 7px;
+      top: calc(var(--fieldSet-size-md-fontSize) / 2);
     }
   }
 
   &--lg {
     @extend %fieldSetBase;
-    padding: 40px 30px 30px 30px;
+    padding: var(--fieldSet-size-lg-paddingTop)
+      var(--fieldSet-size-lg-paddingRight) var(--fieldSet-size-lg-paddingBottom)
+      var(--fieldSet-size-lg-paddingLeft);
 
     > legend {
-      left: 30px;
-      font-size: var(--fontSizeLg);
+      left: var(--fieldSet-size-lg-paddingLeft);
       padding: 0 var(--gap-md);
       margin: 0 0 0 calc(var(--gap-md) * -1);
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-lg-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 9px;
+      top: calc(var(--fieldSet-size-lg-fontSize) / 2);
     }
   }
 }