amis-ui 2.6.0 → 2.7.0

package/scss/components/form/_image.scss

@@ -13,72 +13,108 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: var(--borderWidth) solid var(--borderColor);
-    border-radius: var(--ImageControl-addBtn-borderRadius);
+    border-radius: var(--inputImage-base-default-top-left-border-radius)
+      var(--inputImage-base-default-top-right-border-radius)
+      var(--inputImage-base-default-bottom-right-border-radius)
+      var(--inputImage-base-default-bottom-left-border-radius);
     cursor: pointer;
     margin-right: var(--gap-base);
 
     @include button-variant(
       var(--ImageControl-addBtn-bg),
       var(--ImageControl-addBtn-color),
-      var(--ImageControl-addBtn-border),
-      var(--ImageControl-addBtn-border),
-      var(--ImageControl-addBtn-border),
-      var(--ImageControl-addBtn-border),
-      var(--button-default-default-top-border-width),
-      var(--button-default-default-right-border-width),
-      var(--button-default-default-bottom-border-width),
-      var(--button-default-default-left-border-width),
-      var(--button-default-default-top-border-style),
-      var(--button-default-default-right-border-style),
-      var(--button-default-default-bottom-border-style),
-      var(--button-default-default-left-border-style),
-      var(--button-default-default-shadow),
+      var(--inputImage-base-default-top-border-color),
+      var(--inputImage-base-default-right-border-color),
+      var(--inputImage-base-default-bottom-border-color),
+      var(--inputImage-base-default-left-border-color),
+      var(--inputImage-base-default-top-border-width),
+      var(--inputImage-base-default-right-border-width),
+      var(--inputImage-base-default-bottom-border-width),
+      var(--inputImage-base-default-left-border-width),
+      var(--inputImage-base-default-top-border-style),
+      var(--inputImage-base-default-right-border-style),
+      var(--inputImage-base-default-bottom-border-style),
+      var(--inputImage-base-default-left-border-style),
+      var(--shadows-shadow-none),
       var(--ImageControl-addBtn-onHover-bg),
       var(--ImageControl-addBtn-onHover-color),
-      var(--ImageControl-addBtn-onHover-border),
-      var(--ImageControl-addBtn-onHover-border),
-      var(--ImageControl-addBtn-onHover-border),
-      var(--ImageControl-addBtn-onHover-border),
-      var(--button-default-hover-top-border-width),
-      var(--button-default-hover-right-border-width),
-      var(--button-default-hover-bottom-border-width),
-      var(--button-default-hover-left-border-width),
-      var(--button-default-hover-top-border-style),
-      var(--button-default-hover-right-border-style),
-      var(--button-default-hover-bottom-border-style),
-      var(--button-default-hover-left-border-style),
-      var(--button-default-hover-shadow),
+      var(--inputImage-base-hover-top-border-color),
+      var(--inputImage-base-hover-right-border-color),
+      var(--inputImage-base-hover-bottom-border-color),
+      var(--inputImage-base-hover-left-border-color),
+      var(--inputImage-base-hover-top-border-width),
+      var(--inputImage-base-hover-right-border-width),
+      var(--inputImage-base-hover-bottom-border-width),
+      var(--inputImage-base-hover-left-border-width),
+      var(--inputImage-base-hover-top-border-style),
+      var(--inputImage-base-hover-right-border-style),
+      var(--inputImage-base-hover-bottom-border-style),
+      var(--inputImage-base-hover-left-border-style),
+      var(--shadows-shadow-none),
       var(--ImageControl-addBtn-onActive-bg),
-      var(--ImageControl-addBtn-onActive-color)
-        var(--ImageControl-addBtn-onActive-border),
-      var(--button-default-active-top-border-width),
-      var(--button-default-active-right-border-width),
-      var(--button-default-active-bottom-border-width),
-      var(--button-default-active-left-border-width),
-      var(--button-default-active-top-border-style),
-      var(--button-default-active-right-border-style),
-      var(--button-default-active-bottom-border-style),
-      var(--button-default-active-left-border-style),
-      var(--button-default-active-shadow)
+      var(--ImageControl-addBtn-onActive-color),
+      var(--inputImage-base-active-top-border-color),
+      var(--inputImage-base-active-right-border-color),
+      var(--inputImage-base-active-bottom-border-color),
+      var(--inputImage-base-active-left-border-color),
+      var(--inputImage-base-active-top-border-width),
+      var(--inputImage-base-active-right-border-width),
+      var(--inputImage-base-active-bottom-border-width),
+      var(--inputImage-base-active-left-border-width),
+      var(--inputImage-base-active-top-border-style),
+      var(--inputImage-base-active-right-border-style),
+      var(--inputImage-base-active-bottom-border-style),
+      var(--inputImage-base-active-left-border-style),
+      var(--shadows-shadow-none),
+      var(--ImageControl-addBtn-onDisabled-bg),
+      var(--ImageControl-addBtn-onDisabled-color),
+      var(--inputImage-base-disabled-top-border-color),
+      var(--inputImage-base-disabled-right-border-color),
+      var(--inputImage-base-disabled-bottom-border-color),
+      var(--inputImage-base-disabled-left-border-color),
+      var(--inputImage-base-disabled-top-border-width),
+      var(--inputImage-base-disabled-right-border-width),
+      var(--inputImage-base-disabled-bottom-border-width),
+      var(--inputImage-base-disabled-left-border-width),
+      var(--inputImage-base-disabled-top-border-style),
+      var(--inputImage-base-disabled-right-border-style),
+      var(--inputImage-base-disabled-bottom-border-style),
+      var(--inputImage-base-disabled-left-border-style),
+      var(--shadows-shadow-none)
     );
 
     > svg {
-      width: px2rem(24px);
-      height: px2rem(24px);
       top: 0;
-      margin-bottom: px2rem(8px);
+      margin-bottom: var(--inputImage-base-default-icon-margin);
+      font-size: var(--inputImage-base-default-icon-size);
+      color: var(--inputImage-base-default-icon-color);
     }
 
     &-text {
-      color: var(--ImageControl-addBtn-upload-color);
+      font-size: var(--inputImage-base-default-fontSize);
+      font-weight: var(--inputImage-base-default-fontWeight);
+    }
+
+    &:not(:disabled):not(.is-disabled) {
+      &:hover {
+        > svg {
+          color: var(--inputImage-base-hover-icon-color);
+        }
+      }
+
+      &:hover:active {
+        > svg {
+          color: var(--inputImage-base-active-icon-color);
+        }
+      }
     }
 
     &.is-disabled {
       pointer-events: none;
-      border: px2rem(1px) solid var(--ImageControl-addBtn-onDisabled-border);
-      background: var(--ImageControl-addBtn-onDisabled-bg);
-      color: var(--ImageControl-addBtn-onDisabled-color);
+
+      > svg {
+        color: var(--inputImage-base-disabled-icon-color);
+      }
     }
   }
 
@@ -104,17 +140,26 @@
   }
 
   &-dropzone:focus &-addBtn {
-    border-color: var(--ImageControl-addBtn-onHover-border);
+    border-color: var(--inputImage-base-hover-top-border-color)
+      var(--inputImage-base-hover-right-border-color)
+      var(--inputImage-base-hover-bottom-border-color)
+      var(--inputImage-base-hover-left-border-color);
     background: var(--ImageControl-addBtn-onHover-bg);
-    color: var(--ImageControl-addBtn-onHover-color) !important;
+    color: var(--ImageControl-addBtn-onHover-color);
+
+    > svg {
+      color: var(--inputImage-base-hover-icon-color);
+    }
   }
 
   &-dropzone:hover {
     &-addBtn:not(.is-disabled) {
-      border-color: var(--ImageControl-addBtn-onHover-border);
+      border-color: var(--inputImage-base-hover-top-border-color)
+        var(--inputImage-base-hover-right-border-color)
+        var(--inputImage-base-hover-bottom-border-color)
+        var(--inputImage-base-hover-left-border-color);
       background: var(--ImageControl-addBtn-onHover-bg);
       color: var(--ImageControl-addBtn-onHover-color);
-      border-color: var(--ImageControl-addBtn-onHover-border);
       .#{$ns}ImageControl-addBtn-text {
         color: var(--ImageControl-addBtn-onHover-color);
       }

package/scss/components/form/_list.scss

@@ -10,6 +10,7 @@
   }
 
   &-item {
+    width: var(--listSelect-base-image-width);
     position: relative;
     user-select: none;
     font-size: var(--ListControl-fontSize);
@@ -24,10 +25,18 @@
     transition: var(--ListControl-item-transition);
     max-width: calc(#{px2rem(200px)} + 2 * var(--ListControl-item-paddingX));
     border-radius: var(--ListControl-item-borderRadius);
+    padding: var(--listSelect-base-default-paddingTop)
+      var(--listSelect-base-default-paddingRight)
+      var(--listSelect-base-default-paddingBottom)
+      var(--listSelect-base-default-paddingLeft);
 
     .b-inherit {
       border-color: var(--ListControl-item-color);
     }
+
+    &:hover {
+      color: var(--listSelect-base-hover-color);
+    }
   }
 
   &-itemImage {
@@ -69,6 +78,44 @@
       }
     }
 
+    border-width: var(--listSelect-base-default-top-border-width)
+      var(--listSelect-base-default-right-border-width)
+      var(--listSelect-base-default-bottom-border-width)
+      var(--listSelect-base-default-left-border-width);
+    border-style: var(--listSelect-base-default-top-border-style)
+      var(--listSelect-base-default-right-border-style)
+      var(--listSelect-base-default-bottom-border-style)
+      var(--listSelect-base-default-left-border-style);
+    border-color: var(--listSelect-base-default-top-border-color)
+      var(--listSelect-base-default-right-border-color)
+      var(--listSelect-base-default-bottom-border-color)
+      var(--listSelect-base-default-left-border-color);
+    border-radius: var(--listSelect-base-default-top-left-border-radius)
+      var(--listSelect-base-default-top-right-border-radius)
+      var(--listSelect-base-default-bottom-right-border-radius)
+      var(--listSelect-base-default-bottom-left-border-radius);
+    background: var(--listSelect-base-default-bg-color);
+
+    &:hover {
+      border-width: var(--listSelect-base-hover-top-border-width)
+        var(--listSelect-base-hover-right-border-width)
+        var(--listSelect-base-hover-bottom-border-width)
+        var(--listSelect-base-hover-left-border-width);
+      border-style: var(--listSelect-base-hover-top-border-style)
+        var(--listSelect-base-hover-right-border-style)
+        var(--listSelect-base-hover-bottom-border-style)
+        var(--listSelect-base-hover-left-border-style);
+      border-color: var(--listSelect-base-hover-top-border-color)
+        var(--listSelect-base-hover-right-border-color)
+        var(--listSelect-base-hover-bottom-border-color)
+        var(--listSelect-base-hover-left-border-color);
+      border-radius: var(--listSelect-base-hover-top-left-border-radius)
+        var(--listSelect-base-hover-top-right-border-radius)
+        var(--listSelect-base-hover-bottom-right-border-radius)
+        var(--listSelect-base-hover-bottom-left-border-radius);
+      background: var(--listSelect-base-hover-bg-color);
+    }
+
     &:hover:active,
     &.is-active {
       background: var(--ListControl-item-onActive-bg);
@@ -83,6 +130,24 @@
         border-color: var(--ListControl-item-onActive-color);
       }
 
+      border-width: var(--listSelect-base-active-top-border-width)
+        var(--listSelect-base-active-right-border-width)
+        var(--listSelect-base-active-bottom-border-width)
+        var(--listSelect-base-active-left-border-width);
+      border-style: var(--listSelect-base-active-top-border-style)
+        var(--listSelect-base-active-right-border-style)
+        var(--listSelect-base-active-bottom-border-style)
+        var(--listSelect-base-active-left-border-style);
+      border-color: var(--listSelect-base-active-top-border-color)
+        var(--listSelect-base-active-right-border-color)
+        var(--listSelect-base-active-bottom-border-color)
+        var(--listSelect-base-active-left-border-color);
+      border-radius: var(--listSelect-base-active-top-left-border-radius)
+        var(--listSelect-base-active-top-right-border-radius)
+        var(--listSelect-base-active-bottom-right-border-radius)
+        var(--listSelect-base-active-bottom-left-border-radius);
+      background: var(--listSelect-base-active-bg-color);
+
       &:before {
         content: '';
         position: absolute;
@@ -122,6 +187,24 @@
       .b-inherit {
         border-color: var(--ListControl-item-onDisabled-borderColor);
       }
+
+      border-width: var(--listSelect-base-disabled-top-border-width)
+        var(--listSelect-base-disabled-right-border-width)
+        var(--listSelect-base-disabled-bottom-border-width)
+        var(--listSelect-base-disabled-left-border-width);
+      border-style: var(--listSelect-base-disabled-top-border-style)
+        var(--listSelect-base-disabled-right-border-style)
+        var(--listSelect-base-disabled-bottom-border-style)
+        var(--listSelect-base-disabled-left-border-style);
+      border-color: var(--listSelect-base-disabled-top-border-color)
+        var(--listSelect-base-disabled-right-border-color)
+        var(--listSelect-base-disabled-bottom-border-color)
+        var(--listSelect-base-disabled-left-border-color);
+      border-radius: var(--listSelect-base-disabled-top-left-border-radius)
+        var(--listSelect-base-disabled-top-right-border-radius)
+        var(--listSelect-base-disabled-bottom-right-border-radius)
+        var(--listSelect-base-disabled-bottom-left-border-radius);
+      background: var(--listSelect-base-disabled-bg-color);
     }
   }
-}
+}

package/scss/components/form/_number.scss

@@ -11,13 +11,87 @@
   border-radius: var(--Number-borderRadius);
   overflow: hidden;
 
-  @include input-border();
+  border-width: var(--inputNumber-base-default-top-border-width)
+    var(--inputNumber-base-default-right-border-width)
+    var(--inputNumber-base-default-bottom-border-width)
+    var(--inputNumber-base-default-left-border-width);
+  border-style: var(--inputNumber-base-default-top-border-style)
+    var(--inputNumber-base-default-right-border-style)
+    var(--inputNumber-base-default-bottom-border-style)
+    var(--inputNumber-base-default-left-border-style);
+  border-color: var(--inputNumber-base-default-top-border-color)
+    var(--inputNumber-base-default-right-border-color)
+    var(--inputNumber-base-default-bottom-border-color)
+    var(--inputNumber-base-default-left-border-color);
+  border-radius: var(--inputNumber-base-default-top-left-border-radius)
+    var(--inputNumber-base-default-top-right-border-radius)
+    var(--inputNumber-base-default-bottom-right-border-radius)
+    var(--inputNumber-base-default-bottom-left-border-radius);
+  background: var(--inputNumber-base-default-bg-color);
+
+  &:hover {
+    border-width: var(--inputNumber-base-hover-top-border-width)
+      var(--inputNumber-base-hover-right-border-width)
+      var(--inputNumber-base-hover-bottom-border-width)
+      var(--inputNumber-base-hover-left-border-width);
+    border-style: var(--inputNumber-base-hover-top-border-style)
+      var(--inputNumber-base-hover-right-border-style)
+      var(--inputNumber-base-hover-bottom-border-style)
+      var(--inputNumber-base-hover-left-border-style);
+    border-color: var(--inputNumber-base-hover-top-border-color)
+      var(--inputNumber-base-hover-right-border-color)
+      var(--inputNumber-base-hover-bottom-border-color)
+      var(--inputNumber-base-hover-left-border-color);
+    border-radius: var(--inputNumber-base-hover-top-left-border-radius)
+      var(--inputNumber-base-hover-top-right-border-radius)
+      var(--inputNumber-base-hover-bottom-right-border-radius)
+      var(--inputNumber-base-hover-bottom-left-border-radius);
+    background: var(--inputNumber-base-hover-bg-color);
+  }
 
   &-focused {
-    border-color: var(--Form-input-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
+    border-width: var(--inputNumber-base-active-top-border-width)
+      var(--inputNumber-base-active-right-border-width)
+      var(--inputNumber-base-active-bottom-border-width)
+      var(--inputNumber-base-active-left-border-width);
+    border-style: var(--inputNumber-base-active-top-border-style)
+      var(--inputNumber-base-active-right-border-style)
+      var(--inputNumber-base-active-bottom-border-style)
+      var(--inputNumber-base-active-left-border-style);
+    border-color: var(--inputNumber-base-active-top-border-color)
+      var(--inputNumber-base-active-right-border-color)
+      var(--inputNumber-base-active-bottom-border-color)
+      var(--inputNumber-base-active-left-border-color);
+    border-radius: var(--inputNumber-base-active-top-left-border-radius)
+      var(--inputNumber-base-active-top-right-border-radius)
+      var(--inputNumber-base-active-bottom-right-border-radius)
+      var(--inputNumber-base-active-bottom-left-border-radius);
+    background: var(--inputNumber-base-active-bg-color);
+    box-shadow: var(--inputNumber-base-active-shadow);
   }
 
+  &-disabled {
+    border-width: var(--inputNumber-base-disabled-top-border-width)
+      var(--inputNumber-base-disabled-right-border-width)
+      var(--inputNumber-base-disabled-bottom-border-width)
+      var(--inputNumber-base-disabled-left-border-width);
+    border-style: var(--inputNumber-base-disabled-top-border-style)
+      var(--inputNumber-base-disabled-right-border-style)
+      var(--inputNumber-base-disabled-bottom-border-style)
+      var(--inputNumber-base-disabled-left-border-style);
+    border-color: var(--inputNumber-base-disabled-top-border-color)
+      var(--inputNumber-base-disabled-right-border-color)
+      var(--inputNumber-base-disabled-bottom-border-color)
+      var(--inputNumber-base-disabled-left-border-color);
+    border-radius: var(--inputNumber-base-disabled-top-left-border-radius)
+      var(--inputNumber-base-disabled-top-right-border-radius)
+      var(--inputNumber-base-disabled-bottom-right-border-radius)
+      var(--inputNumber-base-disabled-bottom-left-border-radius);
+    background: var(--inputNumber-base-disabled-bg-color);
+  }
+
+  @include input-border();
+
   &-handler {
     text-align: center;
     overflow: hidden;
@@ -37,8 +111,6 @@
   }
 
   &:hover {
-    border-color: var(--Form-input-onFocused-borderColor);
-
     .#{$ns}Number-handler-wrap {
       display: block;
     }
@@ -70,7 +142,8 @@
     border: 0;
     border-radius: var(--Form-input-borderRadius);
     color: var(--Form-input-color);
-    padding: 0 var(--Form-inputNumber-paddingX);
+    padding: 0 var(--inputNumber-base-default-paddingRight) 0
+      var(--inputNumber-base-default-paddingLeft);
 
     &::placeholder {
       color: var(--Form-input-placeholderColor);
@@ -92,6 +165,7 @@
 
     &:hover:active {
       background: var(--Number-handler-onActive-bg);
+      color: var(--inputNumber-base-active-icon-color);
     }
   }
 
@@ -196,8 +270,30 @@
   }
 }
 
-.#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number {
-  display: block;
+.#{$ns}Form-control--sizeSm > .#{$ns}Number {
+  height: var(--inputNumber-size-sm-height);
+}
+
+.#{$ns}Form-control--sizeMd > .#{$ns}Number {
+  height: var(--inputNumber-size-md-height);
+}
+
+.#{$ns}Form-control--sizeLg > .#{$ns}Number {
+  height: var(--inputNumber-size-lg-height);
+}
+
+.#{$ns}NumberControl {
+  &:not(.is-inline) > .#{$ns}Number {
+    display: block;
+  }
+
+  .#{$ns}Select {
+    min-width: var(--inputNumber-base-default-unit-width);
+    padding: var(--inputNumber-base-default-unit-paddingTop)
+      var(--inputNumber-base-default-unit-paddingRight)
+      var(--inputNumber-base-default-unit-paddingBottom)
+      var(--inputNumber-base-default-unit-paddingLeft);
+  }
 }
 
 .#{$ns}Number--borderHalf,
@@ -222,6 +318,100 @@
   border: var(--Number-borderWidth) solid var(--Number-borderColor);
   border-radius: var(--Number-borderRadius);
   overflow: hidden;
+
+  border-width: var(--inputNumber-enhance-default-top-border-width)
+    var(--inputNumber-enhance-default-right-border-width)
+    var(--inputNumber-enhance-default-bottom-border-width)
+    var(--inputNumber-enhance-default-left-border-width);
+  border-style: var(--inputNumber-enhance-default-top-border-style)
+    var(--inputNumber-enhance-default-right-border-style)
+    var(--inputNumber-enhance-default-bottom-border-style)
+    var(--inputNumber-enhance-default-left-border-style);
+  border-color: var(--inputNumber-enhance-default-top-border-color)
+    var(--inputNumber-enhance-default-right-border-color)
+    var(--inputNumber-enhance-default-bottom-border-color)
+    var(--inputNumber-enhance-default-left-border-color);
+  border-radius: var(--inputNumber-enhance-default-top-left-border-radius)
+    var(--inputNumber-enhance-default-top-right-border-radius)
+    var(--inputNumber-enhance-default-bottom-right-border-radius)
+    var(--inputNumber-enhance-default-bottom-left-border-radius);
+  .#{$ns}Number--enhance-input {
+    background: var(--inputNumber-enhance-default-bg-color);
+  }
+
+  &:hover {
+    border-width: var(--inputNumber-enhance-hover-top-border-width)
+      var(--inputNumber-enhance-hover-right-border-width)
+      var(--inputNumber-enhance-hover-bottom-border-width)
+      var(--inputNumber-enhance-hover-left-border-width);
+    border-style: var(--inputNumber-enhance-hover-top-border-style)
+      var(--inputNumber-enhance-hover-right-border-style)
+      var(--inputNumber-enhance-hover-bottom-border-style)
+      var(--inputNumber-enhance-hover-left-border-style);
+    border-color: var(--inputNumber-enhance-hover-top-border-color)
+      var(--inputNumber-enhance-hover-right-border-color)
+      var(--inputNumber-enhance-hover-bottom-border-color)
+      var(--inputNumber-enhance-hover-left-border-color);
+    border-radius: var(--inputNumber-enhance-hover-top-left-border-radius)
+      var(--inputNumber-enhance-hover-top-right-border-radius)
+      var(--inputNumber-enhance-hover-bottom-right-border-radius)
+      var(--inputNumber-enhance-hover-bottom-left-border-radius);
+    .#{$ns}Number--enhance-input {
+      background: var(--inputNumber-enhance-hover-bg-color);
+    }
+  }
+
+  &:focus-within {
+    border-width: var(--inputNumber-enhance-active-top-border-width)
+      var(--inputNumber-enhance-active-right-border-width)
+      var(--inputNumber-enhance-active-bottom-border-width)
+      var(--inputNumber-enhance-active-left-border-width);
+    border-style: var(--inputNumber-enhance-active-top-border-style)
+      var(--inputNumber-enhance-active-right-border-style)
+      var(--inputNumber-enhance-active-bottom-border-style)
+      var(--inputNumber-enhance-active-left-border-style);
+    border-color: var(--inputNumber-enhance-active-top-border-color)
+      var(--inputNumber-enhance-active-right-border-color)
+      var(--inputNumber-enhance-active-bottom-border-color)
+      var(--inputNumber-enhance-active-left-border-color);
+    border-radius: var(--inputNumber-enhance-active-top-left-border-radius)
+      var(--inputNumber-enhance-active-top-right-border-radius)
+      var(--inputNumber-enhance-active-bottom-right-border-radius)
+      var(--inputNumber-enhance-active-bottom-left-border-radius);
+    .#{$ns}Number--enhance-input {
+      background: var(--inputNumber-enhance-active-bg-color);
+    }
+  }
+
+  &-disabled {
+    border-width: var(--inputNumber-enhance-disabled-top-border-width)
+      var(--inputNumber-enhance-disabled-right-border-width)
+      var(--inputNumber-enhance-disabled-bottom-border-width)
+      var(--inputNumber-enhance-disabled-left-border-width);
+    border-style: var(--inputNumber-enhance-disabled-top-border-style)
+      var(--inputNumber-enhance-disabled-right-border-style)
+      var(--inputNumber-enhance-disabled-bottom-border-style)
+      var(--inputNumber-enhance-disabled-left-border-style);
+    border-color: var(--inputNumber-enhance-disabled-top-border-color)
+      var(--inputNumber-enhance-disabled-right-border-color)
+      var(--inputNumber-enhance-disabled-bottom-border-color)
+      var(--inputNumber-enhance-disabled-left-border-color);
+    border-radius: var(--inputNumber-enhance-disabled-top-left-border-radius)
+      var(--inputNumber-enhance-disabled-top-right-border-radius)
+      var(--inputNumber-enhance-disabled-bottom-right-border-radius)
+      var(--inputNumber-enhance-disabled-bottom-left-border-radius);
+    .#{$ns}Number--enhance-input {
+      background: var(--inputNumber-enhance-disabled-bg-color);
+    }
+  }
+
+  .#{$ns}Number-input {
+    padding: var(--inputNumber-enhance-default-paddingTop)
+      var(--inputNumber-enhance-default-paddingRight)
+      var(--inputNumber-enhance-default-paddingBottom)
+      var(--inputNumber-enhance-default-paddingLeft);
+  }
+
   .#{$ns}Number--enhance-left-icon,
   .#{$ns}Number--enhance-right-icon {
     display: inline-block;
@@ -229,20 +419,58 @@
     height: var(--Form-inputNumber-base-height);
     line-height: var(--Form-inputNumber-base-height);
     text-align: center;
-    color: var(--Form-input-color);
-    background: var(--Form-input-bg);
+    color: var(--inputNumber-enhance-leftIcon-default-color);
+    & > svg {
+      width: var(--fontSizeSm);
+      height: var(--fontSizeSm);
+    }
+  }
+  .#{$ns}Number--enhance-left-icon {
+    background: var(--inputNumber-enhance-leftIcon-default-bg-color);
     &:hover {
       cursor: pointer;
-      background: var(--Form-input-bg);
-      color: var(--Form-input-onHover-borderColor);
+      background: var(--inputNumber-enhance-leftIcon-hover-bg-color);
     }
     &-focused {
-      background: var(--Form-input-bg);
-      color: var(--Form-input-onFocused-borderColor);
+      background: var(--inputNumber-enhance-leftIcon-active-bg-color);
     }
-    & > svg {
-      width: var(--fontSizeSm);
-      height: var(--fontSizeSm);
+    .InputNumber-enhance-minus {
+      content: var(--inputNumber-enhance-leftIcon-default-icon);
+    }
+    svg {
+      width: var(--inputNumber-enhance-leftIcon-default-width);
+      height: var(--inputNumber-enhance-leftIcon-default-height);
+      color: var(--inputNumber-enhance-leftIcon-default-color);
+      &:hover {
+        color: var(--inputNumber-enhance-leftIcon-hover-color);
+      }
+      &:active {
+        color: var(--inputNumber-enhance-leftIcon-active-color);
+      }
+    }
+  }
+  .#{$ns}Number--enhance-right-icon {
+    cursor: pointer;
+    background: var(--inputNumber-enhance-rightIcon-default-bg-color);
+    &:hover {
+      background: var(--inputNumber-enhance-rightIcon-hover-bg-color);
+    }
+    &:active {
+      background: var(--inputNumber-enhance-rightIcon-active-bg-color);
+    }
+    .InputNumber-enhance-plus {
+      content: var(--inputNumber-enhance-rightIcon-default-icon);
+    }
+    svg {
+      width: var(--inputNumber-enhance-rightIcon-default-height);
+      height: var(--inputNumber-enhance-rightIcon-default-width);
+      color: var(--inputNumber-enhance-rightIcon-default-color);
+      &:hover {
+        color: var(--inputNumber-enhance-rightIcon-hover-color);
+      }
+      &:active {
+        color: var(--inputNumber-enhance-rightIcon-active-color);
+      }
     }
   }
   .#{$ns}Number--enhance-left-icon {
@@ -266,9 +494,6 @@
   &:hover {
     border-color: var(--Form-input-onFocused-borderColor);
   }
-  &:focus-within {
-    border-color: var(--Form-input-onFocused-borderColor);
-  }
   .#{$ns}Number--enhance-border-min,
   .#{$ns}Number--enhance-border-max {
     background: var(--Number-handler-onDisabled-bg);
@@ -280,13 +505,11 @@
     }
   }
   .#{$ns}Number--enhance-border-disabled {
-    background: var(--Form-input-onDisabled-bg);
-    color: var(--Form-inputNumber-strong-disabled-color);
+    background: var(--inputNumber-enhance-disabled-bg-color);
     cursor: not-allowed;
     &:hover {
       cursor: not-allowed;
-      background: var(--Form-input-onDisabled-bg);
-      color: var(--Form-inputNumber-strong-disabled-color);
+      background: var(--inputNumber-enhance-disabled-bg-color);
     }
   }
   .#{$ns}Number--enhance-border-readOnly,
@@ -309,7 +532,6 @@
 }
 
 .#{$ns}Number--enhance-disabled {
-  border-color: var(--Form-input-onDisabled-borderColor);
   .#{$ns}Number--enhance-input {
     border-color: var(--Form-input-onDisabled-borderColor);
   }