add vars for Alert types (#12057)

components/alert/style/index.less

@@ -30,34 +30,34 @@
   }
 
   &-success {
-    border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
-    background-color: ~`colorPalette("@{success-color}", 1)`;
+    border: @border-width-base @border-style-base @alert-success-border-color;
+    background-color: @alert-success-bg-color;
     .@{alert-prefix-cls}-icon {
-      color: @success-color;
+      color: @alert-success-icon-color;
     }
   }
 
   &-info {
-    border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`;
-    background-color: ~`colorPalette("@{info-color}", 1)`;
+    border: @border-width-base @border-style-base @alert-info-border-color;
+    background-color: @alert-info-bg-color;
     .@{alert-prefix-cls}-icon {
-      color: @info-color;
+      color: @alert-info-icon-color;
     }
   }
 
   &-warning {
-    border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
-    background-color: ~`colorPalette("@{warning-color}", 1)`;
+    border: @border-width-base @border-style-base @alert-warning-border-color;
+    background-color: @alert-warning-bg-color;
     .@{alert-prefix-cls}-icon {
-      color: @warning-color;
+      color: @alert-warning-icon-color;
     }
   }
 
   &-error {
-    border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
-    background-color: ~`colorPalette("@{error-color}", 1)`;
+    border: @border-width-base @border-style-base @alert-error-border-color;
+    background-color: @alert-error-bg-color;
     .@{alert-prefix-cls}-icon {
-      color: @error-color;
+      color: @alert-error-icon-color;
     }
   }
 

components/style/themes/default.less

@@ -498,4 +498,19 @@
 // ---
 @wave-animation-width: 6px;
 
+// Alert
+// ---
+@alert-success-border-color: ~`colorPalette("@{success-color}", 3)`;
+@alert-success-bg-color: ~`colorPalette("@{success-color}", 1)`;
+@alert-success-icon-color: @success-color;
+@alert-info-border-color: ~`colorPalette("@{info-color}", 3)`;
+@alert-info-bg-color: ~`colorPalette("@{info-color}", 1)`;
+@alert-info-icon-color: @info-color;
+@alert-warning-border-color: ~`colorPalette("@{warning-color}", 3)`;
+@alert-warning-bg-color: ~`colorPalette("@{warning-color}", 1)`;
+@alert-warning-icon-color: @warning-color;
+@alert-error-border-color: ~`colorPalette("@{error-color}", 3)`;
+@alert-error-bg-color: ~`colorPalette("@{error-color}", 1)`;
+@alert-error-icon-color: @error-color;
+
 @import "./default.deperated.less";