@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/typography/style/index.less

@@ -3,35 +3,35 @@
 @import './mixin.less';
 @typography-prefix-cls: ~'@{kd-prefix}-typography';
 .@{typography-prefix-cls} {
-  color: @primary-text-color;
+  color: @typography-color-text-primary;
   overflow-wrap: break-word;
   line-height: 2;
   max-width: @typography-max-width;
 
   &&-second {
-    color: @secondary-text-color;
+    color: @typography-color-text-secondary;
   }
 
   &&-success {
-    color: @success-color;
+    color: @typography-color-success;
   }
 
   &&-warning {
-    color: @warning-color;
+    color: @typography-color-warning;
   }
 
   &&-danger {
-    color: @error-color;
+    color: @typography-color-error;
   }
 
   &&-disabled {
-    color: @disabled-color;
+    color: @typography-color-disabled;
     cursor: not-allowed;
     user-select: none;
   }
 
   &&-assist {
-    color: @third-text-color;
+    color: @typography-color-text-third;
   }
 
   h1&,
@@ -82,14 +82,14 @@
   h3 {
     .typography-title-3();
   }
-  h4&,
-  h4 {
-    .typography-title-4();
-  }
-  h5&,
-  h5 {
-    .typography-title-5();
-  }
+  // h4&,
+  // h4 {
+  //   .typography-title-4();
+  // }
+  // h5&,
+  // h5 {
+  //   .typography-title-5();
+  // }
 
   code {
     margin: 0 0.2em;

package/es/typography/style/mixin.less

@@ -1,5 +1,6 @@
 
-// code component mixin here
+@import './token.less';
+
 .typography-paragraph(@marginBottom) {
   margin-bottom: @marginBottom;
 }
@@ -17,8 +18,7 @@
     @heading-1-size,
     @typography-title-font-weight,
     1.5,
-    @primary-text-color,
-    // @heading-1-margin-bottom
+    @typography-color-text-primary,
     @marginBottom
   );
 }
@@ -29,7 +29,6 @@
     @typography-title-font-weight,
     1.5,
     @heading-2-color,
-    // @heading-2-margin-bottom
     @marginBottom
   );
 }
@@ -39,8 +38,7 @@
     @heading-3-size,
     @typography-title-font-weight,
     1.5,
-    @primary-text-color,
-    // @heading-3-margin-bottom
+    @typography-color-text-primary,
     @marginBottom
   );
 }
@@ -50,7 +48,7 @@
     @heading-4-size,
     @typography-title-font-weight,
     1.4,
-    @primary-text-color,
+    @typography-color-text-primary,
     @typography-title-margin-bottom
   );
 }
@@ -60,21 +58,21 @@
     @heading-5-size,
     @typography-title-font-weight,
     1.5,
-    @primary-text-color,
+    @typography-color-text-primary,
     @typography-title-margin-bottom
   );
 }
 
 .operation-unit() {
-  color: @link-color;
+  color: @typography-link-color;
   text-decoration: none;
   outline: none;
   cursor: pointer;
-  transition: color 0.3s;
+  transition: color @typography-duration-promptly;
 
   &:focus,
   &:hover {
-    color: @link-color-hover;
+    color: @typography-link-color-hover;
   }
 
   &:active {

package/es/typography/style/token.less

@@ -0,0 +1,38 @@
+@import '../../style/themes/token.less';
+
+@typography-prefix: '--@{kd-prefix}-c-typography';
+
+// color
+@heading-2-color: var(~'@{typography-prefix}-title-color-text', #276ff5);
+@typography-color-text-primary: var(~'@{typography-prefix}-color-text-primary', @color-text-primary);
+@typography-color-text-secondary: var(~'@{typography-prefix}-color-text-secondary', @color-text-secondary);
+@typography-color-text-third: var(~'@{typography-prefix}-color-text-third', @color-text-third);
+@typography-color-warning: var(~'@{typography-prefix}-color-warning', @color-warning);
+@typography-color-error: var(~'@{typography-prefix}-color-error', @color-error);
+@typography-color-success: var(~'@{typography-prefix}-color-success', @color-success);
+@typography-color-disabled: var(~'@{typography-prefix}-color-disabled', @color-disabled);
+@typography-link-color: var(~'@{typography-prefix}-color-text-link', @color-text-link);
+@typography-link-color-hover: var(~'@{typography-prefix}-color-text-link-hover', @color-text-link-hover);
+@typography-link-color-active: var(~'@{typography-prefix}-color-text-link-active', @color-text-link-active);
+
+// font
+@typography-title-font-weight: var(~'@{typography-prefix}-title-font-weight', 600);
+@heading-1-size: var(~'@{typography-prefix}-font-size-1', 40px);
+@heading-2-size: var(~'@{typography-prefix}-font-size-2', 28px);
+@heading-3-size: var(~'@{typography-prefix}-font-size-3', 18px);
+
+// motion
+@typography-duration-promptly: var(~'@{typography-prefix}-motion-duration', @duration-promptly);
+
+// spacing
+@typography-title-margin-top: var(~'@{typography-prefix}-title-spacing-margin-top', 1.2em);
+@typography-title-margin-bottom: var(~'@{typography-prefix}-title-spacing-margin-bottom', 0.5em);
+@typography-paragraph-margin-bottom: var(~'@{typography-prefix}-paragraph-spacing-margin-bottom', 24px);
+@typography-margin-bottom: var(~'@{typography-prefix}-spacing-margin-bottom', 80px);
+@heading-1-margin-bottom: var(~'@{typography-prefix}-spacing-margin-bottom-1', 12px);
+@heading-2-margin-bottom: var(~'@{typography-prefix}-spacing-margin-bottom-2', 24px);
+@heading-3-margin-bottom: var(~'@{typography-prefix}-spacing-margin-bottom-3', 12px);
+
+// sizing
+@typography-max-width: var(~'@{typography-prefix}-sizing-width-max', 830px);
+

package/es/upload/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -132,17 +141,17 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  color: #999;
-  border: 1px dashed #e5e5e5;
-  background-color: #fafafa;
-  -webkit-transition: border-color 0.3s, background-color 0.3s;
-  transition: border-color 0.3s, background-color 0.3s;
+  color: var(--kd-c-upload-color, var(--kd-g-color-text-third, #999));
+  border: 1px dashed var(--kd-c-upload-color-border, var(--kd-g-color-border-weak, #e5e5e5));
+  background-color: var(--kd-c-upload-color-background, var(--kd-g-color-background-contain, #fafafa));
+  -webkit-transition: border-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: border-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-upload-drag.hover,
 .kd-upload-drag:hover,
 .kd-upload-drag:active {
-  border-color: #0e5fd8;
-  background-color: #f2f9ff;
+  border-color: var(--kd-c-upload-color-border-active, var(--kd-g-color-text-link, #0e5fd8));
+  background-color: var(--kd-c-upload-color-background-ongoing, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
 .kd-upload-input {
   position: absolute;
@@ -172,8 +181,8 @@
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   margin-top: 16px;
-  font-size: 14px;
-  border-top: 1px dashed #d9d9d9;
+  font-size: var(--kd-c-upload-font-size, var(--kd-g-font-size-middle, 14px));
+  border-top: 1px dashed var(--kd-c-upload-division-color, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-upload .kd-upload-text-list-item {
   position: relative;
@@ -186,22 +195,22 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-transition: background-color 0.3s;
-  transition: background-color 0.3s;
+  -webkit-transition: background-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: background-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-upload .kd-upload-text-list-item:hover {
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-upload-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-upload .kd-upload-text-list-item:hover .kd-upload-text-list-item-action {
   opacity: 1;
   visibility: visible;
   -webkit-transform: translateX(0);
           transform: translateX(0);
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-upload-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-upload .kd-upload-text-list-item.error i,
 .kd-upload .kd-upload-text-list-item.error .kd-upload-text-list-item-name {
-  color: #fb2323;
+  color: var(--kd-c-upload-error-color, var(--kd-g-color-error, #fb2323));
 }
 .kd-upload .kd-upload-text-list-item-name {
   display: inline-block;
@@ -209,10 +218,10 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #212121;
+  color: var(--kd-c-upload-panel-color, var(--kd-g-color-text-primary, #212121));
 }
 .kd-upload .kd-upload-text-list-item-size {
-  color: #999;
+  color: var(--kd-c-upload-color, var(--kd-g-color-text-third, #999));
 }
 .kd-upload .kd-upload-text-list-item-action {
   position: absolute;
@@ -224,14 +233,15 @@
   visibility: hidden;
   -webkit-transform: translateX(5px);
           transform: translateX(5px);
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: -webkit-transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-upload .kd-upload-text-list-item-action a {
   display: inline-block;
   vertical-align: middle;
+  color: var(--kd-c-upload-panel-button-color, #0E5FD8);
 }
 .kd-upload .kd-upload-text-list-item-action a:not(:first-child) {
   margin-left: 20px;
@@ -254,9 +264,9 @@
   margin: 0 28px 28px 0;
   vertical-align: middle;
   overflow: hidden;
-  border-radius: 2px;
-  border: 1px solid #e5e5e5;
-  background-color: #fafafa;
+  border-radius: var(--kd-c-upload-radius-border, var(--kd-g-radius-border, 2px));
+  border: 1px solid var(--kd-c-upload-color-border, var(--kd-g-color-border-weak, #e5e5e5));
+  background-color: var(--kd-c-upload-color-background, var(--kd-g-color-background-contain, #fafafa));
 }
 .kd-upload .kd-upload-picture-list-item .kd-upload-select {
   display: -webkit-box;
@@ -267,21 +277,21 @@
   right: -1px;
   bottom: -1px;
   left: -1px;
-  color: #999;
+  color: var(--kd-c-upload-color, var(--kd-g-color-text-third, #999));
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  border: 1px dashed #e5e5e5;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
+  border: 1px dashed var(--kd-c-upload-color-border, var(--kd-g-color-border-weak, #e5e5e5));
+  -webkit-transition: all var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: all var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-upload .kd-upload-picture-list-item .kd-upload-select:hover,
 .kd-upload .kd-upload-picture-list-item .kd-upload-select:active {
-  border-color: #0e5fd8;
-  background-color: #f2f9ff;
+  border-color: var(--kd-c-upload-color-border-active, var(--kd-g-color-text-link, #0e5fd8));
+  background-color: var(--kd-c-upload-color-background-ongoing, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
 .kd-upload .kd-upload-picture-list-item .kd-upload-select .kd-upload-handle {
   position: absolute;
@@ -311,7 +321,7 @@
   max-height: 100%;
 }
 .kd-upload .kd-upload-picture-list-item.error {
-  border-color: #ff8088;
+  border-color: var(--kd-c-upload-color-border-error, var(--kd-g-color-border-error, #ff8088));
 }
 .kd-upload .kd-upload-picture-list-item-loading {
   width: 100%;
@@ -352,7 +362,7 @@
 }
 .kd-upload .kd-upload-picture-list-item-error-text {
   margin-bottom: 5px;
-  color: #fb2323;
+  color: var(--kd-c-upload-error-color, var(--kd-g-color-error, #fb2323));
 }
 .kd-upload .kd-upload-picture-list-item-error a {
   display: inline-block;

package/es/upload/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @upload-prefix-cls: ~'@{kd-prefix}-upload';
 @upload-prefix-text-list-cls: ~'@{upload-prefix-cls}-text-list';
@@ -23,16 +24,16 @@
     text-align: center;
     align-items: center;
     justify-content: center;
-    color: @third-text-color;
-    border: 1px dashed @weak-border-color;
-    background-color: @contain-bg;
-    transition: border-color @transition-duration, background-color @transition-duration;
+    color: @upload-text-color;
+    border: 1px dashed @upload-border-color;
+    background-color: @upload-background-color;
+    transition: border-color @upload-transition-duration, background-color @upload-transition-duration;
 
     &.hover,
     &:hover,
     &:active {
-      border-color: @link-color;
-      background-color: @ongoing-bg-color;
+      border-color: @upload-border-color-active;
+      background-color: @upload-background-color-ongoing;
     }
   }
 
@@ -59,8 +60,8 @@
   .@{upload-prefix-text-list-cls} {
     .reset-component;
     margin-top: 16px;
-    font-size: @font-size;
-    border-top: 1px dashed @strong-border-color;
+    font-size: @upload-font-size;
+    border-top: 1px dashed @upload-border-color-strong;
 
     &-item {
       position: relative;
@@ -69,23 +70,23 @@
       white-space: nowrap;
       display: flex;
       align-items: center;
-      transition: background-color @transition-duration;
+      transition: background-color @upload-transition-duration;
 
       &:hover {
-        background-color: @hover-color;
+        background-color: @upload-background-color-hover;
 
         .@{upload-prefix-text-list-cls}-item-action {
           opacity: 1;
           visibility: visible;
           transform: translateX(0);
-          background-color: @hover-color;
+          background-color: @upload-background-color-hover;
         }
       }
 
       &.error {
         i,
         .@{upload-prefix-text-list-cls}-item-name {
-          color: @error-color;
+          color: @upload-text-error-color;
         }
       }
 
@@ -93,11 +94,11 @@
         display: inline-block;
         margin: 0 5px;
         .ellipsis;
-        color: @primary-text-color;
+        color: @upload-panel-color;
       }
 
       &-size {
-        color: @third-text-color;
+        color: @upload-text-color;
       }
 
       &-action {
@@ -109,11 +110,12 @@
         opacity: 0;
         visibility: hidden;
         transform: translateX(5px);
-        transition: transform @transition-duration;
+        transition: transform @upload-transition-duration;
 
         a {
           display: inline-block;
           vertical-align: middle;
+          color: @upload-panel-button-color;
 
           &:not(:first-child) {
             margin-left: 20px;
@@ -134,9 +136,9 @@
       margin: 0 28px 28px 0;
       vertical-align: middle;
       overflow: hidden;
-      border-radius: @radius-size;
-      border: 1px solid @weak-border-color;
-      background-color: @contain-bg;
+      border-radius: @upload-border-radius;
+      border: 1px solid @upload-border-color;
+      background-color: @upload-background-color;
 
       .@{upload-prefix-cls}-select {
         display: flex;
@@ -145,16 +147,16 @@
         right: -1px;
         bottom: -1px;
         left: -1px;
-        color: @third-text-color;
+        color: @upload-text-color;
         align-items: center;
         justify-content: center;
-        border: 1px dashed @weak-border-color;
-        transition: all @transition-duration;
+        border: 1px dashed @upload-border-color;
+        transition: all @upload-transition-duration;
 
         &:hover,
         &:active {
-          border-color: @link-color;
-          background-color: @ongoing-bg-color;
+          border-color: @upload-border-color-active;
+          background-color: @upload-background-color-ongoing;
         }
 
         .@{upload-prefix-cls}-handle {
@@ -182,7 +184,7 @@
       }
 
       &.error {
-        border-color: @error-border-color;
+        border-color: @upload-border-error-color;
       }
 
       &-loading {
@@ -208,7 +210,7 @@
 
         &-text {
           margin-bottom: 5px;
-          color: @error-color;
+          color: @upload-text-error-color;
         }
 
         a {

package/es/upload/style/token.less

@@ -0,0 +1,28 @@
+@import "../../style/themes/token.less";
+
+@upload-prefix: '--@{kd-prefix}-c-upload';
+
+// color
+@upload-text-color: var(~'@{upload-prefix}-color', @color-text-third);
+
+@upload-text-error-color: var(~'@{upload-prefix}-error-color', @color-error);
+@upload-border-error-color: var(~'@{upload-prefix}-color-border-error', @color-border-error);
+@upload-border-color: var(~'@{upload-prefix}-color-border', @color-border-weak);
+@upload-border-color-strong: var(~'@{upload-prefix}-division-color', @color-border-strong);
+@upload-border-color-active: var(~'@{upload-prefix}-color-border-active', @color-text-link);
+@upload-background-color: var(~'@{upload-prefix}-color-background', @color-background-contain);
+@upload-background-color-ongoing: var(~'@{upload-prefix}-color-background-ongoing', @color-background-ongoing);
+@upload-background-color-hover: var(~'@{upload-prefix}-color-background-hover', @color-hover);
+
+@upload-panel-button-color: var(~'@{upload-prefix}-panel-button-color', #0E5FD8);
+@upload-panel-color: var(~'@{upload-prefix}-panel-color', @color-text-primary);
+
+// motion
+@upload-transition-duration: var(~'@{upload-prefix}-motion-duration', @duration-promptly);
+
+// font
+@upload-font-size: var(~'@{upload-prefix}-font-size', @font-size-middle);
+
+// radius
+@upload-border-radius: var(~'@{upload-prefix}-radius-border', @radius-border);
+

package/lib/alert/style/index.css

@@ -92,19 +92,27 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .icon-center i {
   -ms-flex-item-align: center;
       align-self: center;
 }
 .kd-alert-container {
+  z-index: var(--kd-g-z-index-apex, 9999);
   display: none;
-  margin: 8px 0;
-  min-height: 50px;
   width: 100%;
+  padding: var(--kd-c-alert-sizing-padding-top, 8px) var(--kd-c-alert-sizing-padding-horizontal, 12px) var(--kd-c-alert-sizing-padding-bottom, 12px);
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  z-index: 9999;
   -webkit-transition: display 3s;
   transition: display 3s;
 }
@@ -117,49 +125,47 @@
       -ms-flex-direction: column;
           flex-direction: column;
   position: fixed;
-  z-index: 9999;
+  z-index: var(--kd-g-z-index-apex, 9999);
   width: 100%;
 }
 .kd-alert.alert-success-bg-color {
-  background-color: #f2fff5;
+  background-color: var(--kd-c-alert-color-background-success, var(--kd-g-color-background-success, #f2fff5));
 }
 .kd-alert.alert-warning-bg-color {
-  background-color: #fffbf2;
+  background-color: var(--kd-c-alert-color-background-warning, var(--kd-g-color-background-warning, #fffbf2));
 }
 .kd-alert.alert-error-bg-color {
-  background-color: #fff2f4;
+  background-color: var(--kd-c-alert-color-background-error, var(--kd-g-color-background-error, #fff2f4));
 }
 .kd-alert.alert-info-bg-color {
-  background-color: #f2f9ff;
+  background-color: var(--kd-c-alert-color-background-info, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
 .kd-alert.alert-success-font-color {
-  color: #1ba854;
+  color: var(--kd-c-alert-color-text-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-alert.alert-warning-font-color {
-  color: #ff991c;
+  color: var(--kd-c-alert-color-text-warning, var(--kd-g-color-warning, #ff991c));
 }
 .kd-alert.alert-error-font-color {
-  color: #fb2323;
+  color: var(--kd-c-alert-color-text-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-alert.alert-info-font-color {
-  color: #0e5fd8;
+  color: var(--kd-c-alert-color-text-info, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-alert-icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  margin: 0 8px 0 32px;
-  width: 16px;
-  height: 16px;
   cursor: default;
+  margin-right: var(--kd-c-alert-message-icon-sizing-margin-right, 8px);
+  font-size: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-alert-icon i {
   -ms-flex-item-align: center;
       align-self: center;
 }
 .kd-alert-message {
-  margin-right: 51px;
-  font-size: 12px;
+  font-size: var(--kd-c-alert-message-font-size, var(--kd-g-font-size-small, 12px));
   line-height: 18px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -169,12 +175,9 @@
           flex-grow: 1;
   cursor: default;
 }
-.kd-alert-without-icon-message {
-  margin-left: 56px;
-}
 .kd-alert-leave {
-  -webkit-transition: min-height 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), opacity 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), margin 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), height 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), line-height 0.3s cubic-bezier(0.32, 0.94, 0.6, 1);
-  transition: min-height 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), opacity 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), margin 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), height 0.3s cubic-bezier(0.32, 0.94, 0.6, 1), line-height 0.3s cubic-bezier(0.32, 0.94, 0.6, 1);
+  -webkit-transition: min-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
+  transition: min-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -193,18 +196,17 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  width: 16px;
-  height: 16px;
-  color: #666;
+  margin-left: var(--kd-c-alert-close-icon-sizing-margin-left, 8px);
+  color: var(--kd-c-alert-close-icon-color-text, var(--kd-g-color-text-secondary, #666));
+  font-size: var(--kd-c-alert-close-icon-font-size, var(--kd-g-font-size-middle, 14px));
   justify-self: flex-end;
-  margin-right: 15px;
   cursor: pointer;
 }
 .kd-alert-close-icon:hover {
-  color: #87adff;
+  color: var(--kd-c-alert-close-icon-color-text-hover, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-alert-close-icon:active {
-  color: #375cca;
+  color: var(--kd-g-color-theme-7, #375cca);
 }
 .kd-alert-close-icon i {
   -ms-flex-item-align: center;
@@ -217,8 +219,8 @@
 }
 .kd-alert-banner {
   position: fixed;
-  -webkit-animation: moveIn 0.3s cubic-bezier(0.32, 0.94, 0.6, 1) both;
-          animation: moveIn 0.3s cubic-bezier(0.32, 0.94, 0.6, 1) both;
+  -webkit-animation: moveIn var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1) both;
+          animation: moveIn var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1) both;
 }
 @-webkit-keyframes moveIn {
   from {