refactor: form input css

Author: tangjinzhou

components/form/style/mixin.less

@@ -1,12 +1,18 @@
 @import '../../input/style/mixin';
 
-.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
+.form-control-validation(
+  @text-color: @input-color;
+  @border-color: @input-border-color;
+  @background-color: @input-bg;
+  @hoverBorderColor: @primary-color-hover;
+  @outlineColor: @primary-color-outline;
+) {
   .@{ant-prefix}-form-item-split {
     color: @text-color;
   }
   // 输入框的不同校验状态
-  .@{ant-prefix}-input,
-  .@{ant-prefix}-input-affix-wrapper {
+  :not(.@{ant-prefix}-input-disabled):not(.@{ant-prefix}-input-borderless).@{ant-prefix}-input,
+  :not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper {
     &,
     &:hover {
       background-color: @background-color;
@@ -15,32 +21,12 @@
 
     &:focus,
     &-focused {
-      .active(@border-color);
-    }
-  }
-
-  .@{ant-prefix}-input-disabled {
-    &,
-    &:hover {
-      background-color: @input-disabled-bg;
-      border-color: @input-border-color;
-    }
-  }
-
-  .@{ant-prefix}-input-affix-wrapper-disabled {
-    &,
-    &:hover {
-      background-color: @input-disabled-bg;
-      border-color: @input-border-color;
-
-      input:focus {
-        box-shadow: none !important;
-      }
+      .active(@border-color, @hoverBorderColor, @outlineColor);
     }
   }
 
   .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
-    .active(@border-color);
+    .active(@border-color, @hoverBorderColor, @outlineColor);
   }
 
   .@{ant-prefix}-input-prefix {

components/form/style/status.less

@@ -118,7 +118,7 @@
 
   // ======================== Warning ========================
   &-has-warning {
-    .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg);
+    .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg; @warning-color-hover; @warning-color-outline);
 
     &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
       color: @warning-color;
@@ -159,7 +159,7 @@
 
   // ========================= Error =========================
   &-has-error {
-    .form-control-validation(@error-color; @error-color; @form-error-input-bg);
+    .form-control-validation(@error-color; @error-color; @form-error-input-bg; @error-color-hover; @error-color-outline);
 
     &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
       color: @error-color;

components/style/themes/default.less

@@ -17,13 +17,27 @@
 @info-color: @primary-color;
 @success-color: @green-6;
 @processing-color: @blue-6;
-@error-color: @red-5;
 @highlight-color: @red-5;
-@warning-color: @gold-6;
 @normal-color: #d9d9d9;
 @white: #fff;
 @black: #000;
 
+// >>> Warning
+@warning-color: @gold-6;
+@warning-color-hover: color(~`colorPalette('@{warning-color}', 5) `);
+@warning-color-active: color(~`colorPalette('@{warning-color}', 7) `);
+@warning-color-outline: fade(@warning-color, @outline-fade);
+@warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `);
+@warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `);
+
+// >>> Error
+@error-color: @red-5;
+@error-color-hover: color(~`colorPalette('@{error-color}', 5) `);
+@error-color-active: color(~`colorPalette('@{error-color}', 7) `);
+@error-color-outline: fade(@error-color, @outline-fade);
+@error-color-deprecated-bg: color(~`colorPalette('@{error-color}', 1) `);
+@error-color-deprecated-border: color(~`colorPalette('@{error-color}', 3) `);
+
 // Color used by default to control hover and active backgrounds and for
 // alert info backgrounds.
 @primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)