@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/menu/style/token.less

@@ -0,0 +1,32 @@
+@import "../../style/themes/token.less";
+
+@menu-prefix: '--@{kd-prefix}-c-menu';
+
+// shadow
+// color
+@menu-color-disabled: var(~'@{menu-prefix}-color-disabled', @color-disabled);
+@menu-sub-color: var(~'@{menu-prefix}-sub-color', rgba(255, 255, 255, 0.65));
+@menu-sub-color-hover: var(~'@{menu-prefix}-sub-color-hover', @color-white);
+@menu-sub-color-active: var(~'@{menu-prefix}-sub-color-active', @color-theme);
+@menu-sub-color-background: var(~'@{menu-prefix}-sub-color-background', #21242d);
+@menu-inline-color-active: var(~'@{menu-prefix}-inline-color-active', @color-white);
+@menu-color-background: var(~'@{menu-prefix}-color-background', #343848);
+
+@menu-light-color: var(~'@{menu-prefix}-light-color', @color-text-primary);
+@menu-light-color-hover: var(~'@{menu-prefix}-light-color-hover', @color-ongoing);
+@menu-light-color-active: var(~'@{menu-prefix}-light-color-active', @color-theme);
+@menu-light-color-background: var(~'@{menu-prefix}-light-color-background', @color-background-ongoing);
+
+// sizing
+@menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
+// spacing
+// motion
+@menu-motion-duration: var(~'@{menu-prefix}-motion-duration', @duration-promptly);
+
+// font
+@menu-icon-font-size: var(~'@{menu-prefix}-icon-font-size', @font-size-xx-large);
+
+// radius
+// line-height
+// z-index
+@menu-z-index: var(~'@{menu-prefix}-z-index', @z-index-dialog);

package/es/message/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 */
 .kd-message-box {
   position: fixed;
   width: 100%;
@@ -104,7 +113,7 @@
       -ms-flex-direction: column;
           flex-direction: column;
   pointer-events: none;
-  z-index: 9999;
+  z-index: var(--kd-c-message-z-index, var(--kd-g-z-index-apex, 9999));
 }
 .kd-message {
   position: relative;
@@ -115,9 +124,10 @@
   max-width: 1000px;
   margin: 0 auto 16px;
   padding: 10px 20px;
-  border: 1px solid #ccc;
+  color: var(--kd-c-message-info-color-text, var(--kd-g-color-text-link, #0e5fd8));
+  border: 1px solid var(--kd-c-message-info-color-border, #b3d5ff);
   border-radius: 4px;
-  background-color: #fff;
+  background-color: var(--kd-c-message-info-color-background, #e0efff);
   pointer-events: all;
   -webkit-animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
           animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
@@ -146,22 +156,22 @@
   cursor: pointer;
 }
 .kd-message-content-close:hover {
-  color: #85b8ff;
+  color: var(--kd-c-message-icon-color-text-hover, var(--kd-g-color-border-ongoing, #85b8ff));
 }
 .kd-message-success {
-  color: #1ba854;
-  background: #dcfae4;
-  border: 1px solid #a1e6b5;
+  color: var(--kd-c-message-success-color-text, var(--kd-g-color-success, #1ba854));
+  background: var(--kd-c-message-success-color-background, #dcfae4);
+  border: 1px solid var(--kd-c-message-success-color-border, #a1e6b5);
 }
 .kd-message-warning {
-  color: #ff991c;
-  background: #fff1d4;
-  border: 1px solid #ffe0a6;
+  color: var(--kd-c-message-warning-color-text, var(--kd-g-color-warning, #ff991c));
+  background: var(--kd-c-message-warning-color-background, #fff1d4);
+  border: 1px solid var(--kd-c-message-warning-color-border, #ffe0a6);
 }
 .kd-message-error {
-  color: #fb2323;
-  background: #ffdbe0;
-  border: 1px solid #ffadb6;
+  color: var(--kd-c-message-error-color-text, var(--kd-g-color-error, #fb2323));
+  background: var(--kd-c-message-error-color-background, #ffdbe0);
+  border: 1px solid var(--kd-c-message-error-color-border, #ffadb6);
 }
 .kd-message-leave {
   -webkit-animation: kdNoticeLeaveEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;

package/es/message/style/index.less

@@ -1,4 +1,5 @@
 @import '../../style/themes/index';
+@import './token.less';
 
 @msg-prefix-cls: ~'@{kd-prefix}-message';
 
@@ -9,7 +10,7 @@
   display: flex;
   flex-direction: column;
   pointer-events: none;
-  z-index: @notice-zIndex;
+  z-index: @message-z-index;
 }
 
 .@{msg-prefix-cls} {
@@ -20,9 +21,10 @@
   max-width: 1000px;
   margin: 0 auto 16px;
   padding: 10px 20px;
-  border: 1px solid #ccc;
+  color: @message-info-text-color;
+  border: 1px solid @message-info-color-border;
   border-radius: 4px;
-  background-color: @white;
+  background-color: @message-info-color-background;
   pointer-events: all;
   animation: kdNoticeEffect calc(@transition-duration - 0.2s) @ease-out forwards;
 
@@ -44,27 +46,27 @@
       cursor: pointer;
 
       &:hover {
-        color: @ongoing-border-color;
+        color: @message-icon-text-color-hover;
       }
     }
   }
 
   &-success {
-    color: #1ba854;
-    background: #dcfae4;
-    border: 1px solid #a1e6b5;
+    color: @message-success-text-color;
+    background: @message-success-color-background;
+    border: 1px solid @message-success-color-border;
   }
 
   &-warning {
-    color: #ff991c;
-    background: #fff1d4;
-    border: 1px solid #ffe0a6;
+    color: @message-warning-text-color;
+    background: @message-warning-color-background;
+    border: 1px solid @message-warning-color-border;
   }
 
   &-error {
-    color: #fb2323;
-    background: #ffdbe0;
-    border: 1px solid #ffadb6;
+    color: @message-error-text-color;
+    background: @message-error-color-background;
+    border: 1px solid @message-error-color-border;
   }
 
   &-leave {

package/es/message/style/token.less

@@ -0,0 +1,21 @@
+@import '../../style/themes/token.less';
+
+@message-custom-prefix: ~'--@{kd-prefix}-c-message';
+
+// color
+@message-info-color-background: var(~'@{message-custom-prefix}-info-color-background', #e0efff);
+@message-info-color-border: var(~'@{message-custom-prefix}-info-color-border', #b3d5ff);
+@message-success-color-background: var(~'@{message-custom-prefix}-success-color-background', #dcfae4);
+@message-success-color-border: var(~'@{message-custom-prefix}-success-color-border', #a1e6b5);
+@message-success-text-color: var(~'@{message-custom-prefix}-success-color-text', @color-success);
+@message-warning-color-background: var(~'@{message-custom-prefix}-warning-color-background', #fff1d4);
+@message-warning-color-border: var(~'@{message-custom-prefix}-warning-color-border', #ffe0a6);
+@message-warning-text-color: var(~'@{message-custom-prefix}-warning-color-text', @color-warning);
+@message-error-color-background: var(~'@{message-custom-prefix}-error-color-background', #ffdbe0);
+@message-error-color-border: var(~'@{message-custom-prefix}-error-color-border', #ffadb6);
+@message-error-text-color: var(~'@{message-custom-prefix}-error-color-text', @color-error);
+@message-icon-text-color-hover: var(~'@{message-custom-prefix}-icon-color-text-hover', @color-border-ongoing);
+@message-info-text-color: var(~'@{message-custom-prefix}-info-color-text', @color-text-link);
+
+// z-index
+@message-z-index: var(~'@{message-custom-prefix}-z-index', @z-index-apex);

package/es/modal/style/index.css

@@ -98,13 +98,22 @@
   top: 0;
   bottom: 0;
 }
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-modal-container {
   position: relative;
-  z-index: 1050;
+  z-index: var(--kd-c-modal-z-index, var(--kd-g-z-index-dialog, 1050));
 }
 .kd-modal-mask {
   position: fixed;
-  background-color: rgba(55, 55, 55, 0.5);
+  background-color: var(--kd-c-modal-mask-color-background, rgba(55, 55, 55, 0.5));
   z-index: auto;
   left: 0;
   right: 0;
@@ -127,9 +136,9 @@
       -ms-flex-direction: column;
           flex-direction: column;
   background: #ffffff;
-  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
+  -webkit-box-shadow: var(--kd-c-modal-box-shadow, 0 4px 10px 0 rgba(0, 0, 0, 0.2));
+          box-shadow: var(--kd-c-modal-box-shadow, 0 4px 10px 0 rgba(0, 0, 0, 0.2));
+  border-radius: var(--kd-c-modal-boeder-radius, 2px);
   outline: none;
 }
 .kd-modal-container-box .kd-modal-header {
@@ -139,11 +148,11 @@
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  padding: 16px 27px 0 24px;
+  padding: var(--kd-c-modal-header-sizing-padding-vertical, 0px) var(--kd-c-modal-header-sizing-padding-horizontal, 20px);
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  min-height: 43px;
+  height: var(--kd-c-modal-header-sizing-height, 50px);
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-title-container {
   display: -webkit-box;
@@ -158,24 +167,24 @@
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-title-container .kd-modal-title-icon {
   border-radius: 50% 50%;
-  width: 6px;
-  height: 6px;
-  margin-right: 8px;
+  width: var(--kd-c-modal-icon-circle-sizing, 6px);
+  height: var(--kd-c-modal-icon-circle-sizing, 6px);
+  margin-right: var(--kd-c-modal-title-icon-sizing-margin-right, 8px);
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-title-container .modal-confirm-title-icon-bgcolor {
-  background-color: #276ff5;
+  background-color: var(--kd-c-modal-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-title-container .modal-warning-title-icon-bgcolor {
-  background-color: #ff991c;
+  background-color: var(--kd-c-modal-color-warning, var(--kd-g-color-warning, #ff991c));
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-title-container .modal-error-title-icon-bgcolor {
-  background-color: #fb2323;
+  background-color: var(--kd-c-modal-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-title-container .kd-modal-title {
   min-width: 72px;
   min-height: 27px;
-  font-size: 18px;
-  color: #212121;
+  font-size: var(--kd-c-modal-title-font-size, 18px);
+  color: var(--kd-c-modal-title-text-color, var(--kd-g-color-text-primary, #212121));
   line-height: 27px;
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-title-container:active {
@@ -191,15 +200,15 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 10px;
-  height: 10px;
+  font-size: var(--kd-c-modal-close-icon-font-size, 16px);
+  color: var(--kd-c-modal-close-icon-color-text, #666666);
   cursor: pointer;
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-close-icon:hover {
-  color: #87adff;
+  color: var(--kd-c-modal-color-theme-hover, var(--kd-g-color-theme-5, #87adff));
 }
 .kd-modal-container-box .kd-modal-header .kd-modal-close-icon:active {
-  color: #375cca;
+  color: var(--kd-c-modal-color-theme-active, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-modal-container-box .kd-modal-header:active {
   cursor: move;
@@ -209,12 +218,12 @@
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  padding: 20px 48px 32px;
-  font-size: 16px;
-  color: #212121;
+  padding: var(--kd-c-modal-body-sizing-padding, 20px);
+  font-size: var(--kd-c-modal-body-font-size, 16px);
+  color: var(--kd-c-modal-body-text-color, var(--kd-g-color-text-primary, #212121));
 }
 .kd-modal-container-box .kd-modal-footer {
-  min-height: 64px;
+  height: var(--kd-c-modal-footer-sizing-height, 50px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -224,21 +233,21 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 14px;
-  color: #666;
+  font-size: var(--kd-c-modal-footer-font-size, 14px);
+  color: var(--kd-c-modal-footer-text-color, var(--kd-g-color-text-secondary, #666));
 }
 .kd-modal-ok-btn,
 .kd-modal-cancel-btn {
   min-width: 88px;
   min-height: 32px;
-  font-size: 14px;
+  font-size: var(--kd-c-modal-footer-font-size, 14px);
 }
 .kd-modal-margin-btn {
   margin-right: 20px;
 }
 .kd-modal-showline .kd-modal-header {
-  border-bottom: 1px solid #d9d9d9;
+  border-bottom: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
 .kd-modal-showline .kd-modal-footer {
-  border-top: 1px solid #d9d9d9;
+  border-top: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
 }

package/es/modal/style/index.less

@@ -6,21 +6,11 @@
 @confirm: confirm;
 @warning: warning;
 @error: error;
-@icon-circle-radiu: 6px;
-
-@modal-title-font-size: 18px;
-@modal-title-font-color: @primary-text-color;
-@modal-body-font-size: 16px;
-@modal-body-font-color: @primary-text-color;
-@modal-footer-font-size: 14px;
-@modal-footer-font-color: @secondary-text-color;
-@modal-radius: 2px;
-@modal-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 
 @modal-bg-type-set: {
-  @confirm: @ongoing-color;
-  @warning: @warning-color;
-  @error: @error-color;
+  @confirm: @modal-color-ongoing;
+  @warning: @modal-color-warning;
+  @error: @modal-color-error;
 };
 
 @modal-footer-type-set: {
@@ -32,10 +22,10 @@
 .@{modal-prefix-cls} {
   &-container {
     position: relative;
-    z-index: @zIndex-dialog;
+    z-index: @modal-z-index-dialog;
   }
   &-mask {
-    .overlay(rgba(55, 55, 55, 0.5), 0);
+    .overlay(@modal-mask-color-background, 0);
   }
   // &-mask + &-container-box {
 
@@ -57,16 +47,16 @@
     .@{modal-prefix-cls}-header {
       display: flex;
       justify-content: space-between;
-      padding: 16px 27px 0 24px;
+      padding: @modal-header-sizing-padding-vertical @modal-header-sizing-padding-horizontal;
       align-items: center;
-      min-height: 43px;
+      height: @modal-header-sizing-height;
       .@{modal-prefix-cls}-title-container {
         display: flex;
         justify-content: center;
         align-items: center;
         .@{modal-prefix-cls}-title-icon {
           .modal-title-icon-type(@icon-circle-radiu);
-          margin-right: 8px;
+          margin-right: @modal-title-icon-sizing-margin-right;
         }
         each(@modal-bg-type-set, {
           .modal-title-icon-bgcolor-type(@key, @value)
@@ -86,14 +76,14 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 10px;
-        height: 10px;
+        font-size: @modal-close-icon-size;
+        color: @modal-close-icon-color-text;
         cursor: pointer;
         &:hover {
-          color: @theme-color-hover;
+          color: @modal-theme-color-hover;
         }
         &:active {
-          color: @theme-color-click;
+          color: @modal-theme-color-active;
         }
       }
       &:active {
@@ -104,12 +94,12 @@
     .@{modal-prefix-cls}-body {
       display: block;
       flex-grow: 1;
-      padding: 20px 48px 32px;
+      padding: @modal-body-sizing-padding;
       font-size: @modal-body-font-size;
       color: @modal-body-font-color;
     }
     .@{modal-prefix-cls}-footer {
-      min-height: 64px;
+      height: @modal-footer-sizing-height;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -136,9 +126,9 @@
 
 .@{modal-prefix-cls}-showline {
   .@{modal-prefix-cls}-header {
-    border-bottom: 1px solid @modal-border-color;
+    border-bottom: @modal-border-width solid @modal-border-color;
   }
   .@{modal-prefix-cls}-footer {
-    border-top: 1px solid @modal-border-color;
+    border-top: @modal-border-width solid @modal-border-color;
   }
 }

package/es/modal/style/mixin.less

@@ -1,3 +1,5 @@
+@import './token.less';
+
 .modal-title-icon-type(@squareWidth) {
   border-radius: 50% 50%;
   width: @squareWidth;

package/es/modal/style/token.less

@@ -0,0 +1,46 @@
+@import '../../style/themes/token.less';
+
+@modal-prefix: '--@{kd-prefix}-c-modal';
+
+// color
+@modal-primary-text-color: var(~'@{modal-prefix}-color-text-primary', @color-text-primary);
+@modal-secondary-text-color: var(~'@{modal-prefix}-color-text-secondary', @color-text-secondary);
+@modal-color-ongoing: var(~'@{modal-prefix}-color-ongoing', @color-ongoing);
+@modal-color-warning: var(~'@{modal-prefix}-color-warning', @color-warning);
+@modal-color-error: var(~'@{modal-prefix}-color-error', @color-error);
+@modal-footer-font-color: var(~'@{modal-prefix}-footer-text-color', @color-text-secondary);
+@modal-body-font-color: var(~'@{modal-prefix}-body-text-color', @color-text-primary);
+@modal-title-font-color: var(~'@{modal-prefix}-title-text-color', @color-text-primary);
+@modal-border-color: var(~'@{modal-prefix}-color-border', @color-border-strong-2);
+@modal-theme-color-hover: var(~'@{modal-prefix}-color-theme-hover', @color-theme-5);
+@modal-theme-color-active: var(~'@{modal-prefix}-color-theme-active', @color-theme-7);
+@modal-mask-color-background: var(~'@{modal-prefix}-mask-color-background', rgba(55, 55, 55, 0.5));
+@modal-close-icon-color-text: var(~'@{modal-prefix}-close-icon-color-text', #666666);
+@confirm-modal-title-icon-bg: var(~'@{modal-prefix}-title-icon-color-backround-ongoing', @color-ongoing); // 提示弹窗的背景色
+@warning-modal-title-icon-bg: var(~'@{modal-prefix}-title-icon-color-backround-warning', @color-warning); // 警告弹窗的背景色
+@error-modal-title-icon-bg: var(~'@{modal-prefix}-title-icon-color-backround-warning', @color-warning); // 反馈浮层错误提示的背景色
+
+// z-index
+@modal-z-index-dialog: var(~'@{modal-prefix}-z-index', @z-index-dialog);
+
+// font
+@modal-footer-font-size: var(~'@{modal-prefix}-footer-font-size', 14px);
+@modal-body-font-size: var(~'@{modal-prefix}-body-font-size', 16px);
+@modal-title-font-size: var(~'@{modal-prefix}-title-font-size', 18px);
+
+// shadow
+@modal-shadow: var(~'@{modal-prefix}-box-shadow', 0 4px 10px 0 rgba(0, 0, 0, 0.2));
+
+// radius
+@modal-radius: var(~'@{modal-prefix}-boeder-radius', 2px);
+
+// sizing
+@icon-circle-radiu: var(~'@{modal-prefix}-icon-circle-sizing', 6px);
+@modal-border-width: var(~'@{modal-prefix}-sizing-border', 1px);
+@modal-close-icon-size: var(~'@{modal-prefix}-close-icon-font-size', 16px);
+@modal-header-sizing-padding-horizontal: var(~'@{modal-prefix}-header-sizing-padding-horizontal', 20px);
+@modal-header-sizing-padding-vertical: var(~'@{modal-prefix}-header-sizing-padding-vertical', 0px);
+@modal-header-sizing-height: var(~'@{modal-prefix}-header-sizing-height', 50px);
+@modal-body-sizing-padding: var(~'@{modal-prefix}-body-sizing-padding', 20px);
+@modal-footer-sizing-height: var(~'@{modal-prefix}-footer-sizing-height', 50px);
+@modal-title-icon-sizing-margin-right: var(~'@{modal-prefix}-title-icon-sizing-margin-right', 8px);

package/es/notification/content.js

@@ -115,7 +115,7 @@ var Content = function Content(args) {
   var getMainElement = function getMainElement() {
     if (typeof content === 'string') {
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames("".concat(classPrefix, "-main"))
+        className: classNames("".concat(classPrefix, "-description"))
       }, content);
     }
 

package/es/notification/style/index.css

@@ -92,12 +92,21 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-notice-box-topRight,
 .kd-notice-box-topLeft,
 .kd-notice-box-bottomLeft,
 .kd-notice-box-bottomRight {
   position: fixed;
-  z-index: 9999;
+  z-index: var(--kd-c-notice-z-index, var(--kd-g-z-index-apex, 9999));
 }
 .kd-notice {
   position: relative;
@@ -109,9 +118,9 @@
   -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
           box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
   border-radius: 2px;
-  background-color: #fff;
-  -webkit-animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  background-color: var(--kd-c-notice-content-color-background, var(--kd-g-color-white, #fff));
+  -webkit-animation: kdNoticeEffect var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdNoticeEffect var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
 }
 .kd-notice-content {
   width: 100%;
@@ -124,7 +133,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  font-size: 14px;
+  font-size: var(--kd-c-notice-title-font-size, var(--kd-g-font-size-middle, 14px));
   -ms-flex-line-pack: center;
       align-content: center;
   -webkit-box-pack: justify;
@@ -158,7 +167,7 @@
 .kd-notice-content-title-close {
   cursor: pointer;
 }
-.kd-notice-content-main {
+.kd-notice-content-description {
   height: 46px;
   padding: 10px 20px;
   font-size: 12px;
@@ -177,60 +186,60 @@
           align-items: center;
   padding: 0 20px 15px 20px;
   font-size: 12px;
-  color: #0e5fd8;
+  color: var(--kd-c-notice-footer-color, var(--kd-g-color-text-link, #0e5fd8));
   cursor: pointer;
 }
 .kd-notice-content-footer > div {
   margin-right: 10px;
 }
 .kd-notice-content-footer > div:hover {
-  color: #3987ed;
+  color: var(--kd-c-notice-footer-color-hover, var(--kd-g-color-text-link-hover, #3987ed));
 }
 .kd-notice-info .kd-notice-content-title {
-  color: #212121;
-  background: #fff;
+  color: var(--kd-c-notice-info-color, var(--kd-g-color-text-primary, #212121));
+  background: var(--kd-c-notice-info-header-color-background, var(--kd-g-color-white, #fff));
 }
 .kd-notice-info .kd-notice-content-title-left-icon {
-  color: #5582f3;
+  color: var(--kd-c-notice-icon-color, var(--kd-g-color-theme, #5582f3));
 }
 .kd-notice-info .kd-notice-content-title-close {
-  color: #5582f3;
+  color: var(--kd-c-notice-icon-color, var(--kd-g-color-theme, #5582f3));
 }
 .kd-notice-info .kd-notice-content-title-close:hover {
-  color: #85b8ff;
+  color: var(--kd-c-notice-icon-color-hover, var(--kd-g-color-border-ongoing, #85b8ff));
 }
 .kd-notice-primary .kd-notice-content-title {
-  color: #fff;
-  background: #5582f3;
+  color: var(--kd-c-notice-header-color, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-notice-header-color-background, var(--kd-g-color-theme, #5582f3));
 }
 .kd-notice-primary .kd-notice-content-title-close {
-  color: #fff;
+  color: var(--kd-c-notice-header-color, var(--kd-g-color-white, #fff));
 }
 .kd-notice-primary .kd-notice-content-title-close:hover {
-  color: #85b8ff;
+  color: var(--kd-c-notice-icon-color-hover, var(--kd-g-color-border-ongoing, #85b8ff));
 }
 .kd-notice-leave {
-  -webkit-animation: kdNoticeLeaveEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: kdNoticeLeaveEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-animation: kdNoticeLeaveEffect var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdNoticeLeaveEffect var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
 }
 .kd-notice-leave-after {
   padding: 0;
   margin: 0;
   opacity: 0;
-  -webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+  -webkit-transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
+  transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-notice-leave-after.kd-notice-success,
 .kd-notice-leave-after.kd-notice-warning,
 .kd-notice-leave-after.kd-notice-error {
-  -webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+  -webkit-transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
+  transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
   border: none;
 }
 .kd-notice-leave-after div,
 .kd-notice-leave-after i {
-  -webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
+  -webkit-transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
+  transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
   height: 0;
   font-size: 0;
 }