@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/tag/style/index.css

@@ -92,13 +92,22 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-tag {
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
+  -webkit-transition: all var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: all var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-tag-size-small {
-  font-size: 12px;
-  height: 20px;
+  font-size: var(--kd-c-tag-font-size-small, var(--kd-g-font-size-small, 12px));
+  height: var(--kd-c-tag-sizing-height-small, 20px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-inline-box;
@@ -108,12 +117,12 @@
       -ms-flex-align: center;
           align-items: center;
   vertical-align: middle;
-  padding: 0 6px;
-  border-radius: 10px;
+  padding: 0 var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
+  border-radius: calc(var(--kd-c-tag-sizing-height-small, 20px) / 2);
 }
 .kd-tag-size-middle {
-  font-size: 12px;
-  height: 20px;
+  font-size: var(--kd-c-tag-font-size-middle, var(--kd-g-font-size-small, 12px));
+  height: var(--kd-c-tag-sizing-height-middle, 20px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-inline-box;
@@ -123,12 +132,12 @@
       -ms-flex-align: center;
           align-items: center;
   vertical-align: middle;
-  padding: 0 7px;
-  border-radius: 10px;
+  padding: 0 var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
+  border-radius: calc(var(--kd-c-tag-sizing-height-middle, 20px) / 2);
 }
 .kd-tag-size-large {
-  font-size: 14px;
-  height: 24px;
+  font-size: var(--kd-c-tag-font-size-large, var(--kd-g-font-size-middle, 14px));
+  height: var(--kd-c-tag-sizing-height-large, 24px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-inline-box;
@@ -138,95 +147,95 @@
       -ms-flex-align: center;
           align-items: center;
   vertical-align: middle;
-  padding: 0 8px;
-  border-radius: 12px;
+  padding: 0 var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
+  border-radius: calc(var(--kd-c-tag-sizing-height-large, 24px) / 2);
 }
 .kd-tag-shape-status {
-  border: 1px solid #276ff5;
-  color: #276ff5;
+  border: 1px solid var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
+  color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-tag-shape-status:hover {
-  background-color: #276ff5;
+  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   color: #fff;
 }
 .kd-tag-shape-status.kd-tag-process {
-  border: 1px solid #276ff5;
-  color: #276ff5;
+  border: 1px solid var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
+  color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-tag-shape-status.kd-tag-process:hover {
-  background-color: #276ff5;
+  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   color: #fff;
 }
 .kd-tag-shape-status.kd-tag-success {
-  border: 1px solid #1ba854;
-  color: #1ba854;
+  border: 1px solid var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
+  color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-tag-shape-status.kd-tag-success:hover {
-  background-color: #1ba854;
+  background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   color: #fff;
 }
 .kd-tag-shape-status.kd-tag-warning {
-  border: 1px solid #ff991c;
-  color: #ff991c;
+  border: 1px solid var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
+  color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
 }
 .kd-tag-shape-status.kd-tag-warning:hover {
-  background-color: #ff991c;
+  background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   color: #fff;
 }
 .kd-tag-shape-status.kd-tag-error {
-  border: 1px solid #fb2323;
-  color: #fb2323;
+  border: 1px solid var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
+  color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-tag-shape-status.kd-tag-error:hover {
-  background-color: #fb2323;
+  background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   color: #fff;
 }
 .kd-tag-shape-status.kd-tag-end {
-  border: 1px solid #666;
-  color: #666;
+  border: 1px solid var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
+  color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
 }
 .kd-tag-shape-status.kd-tag-end:hover {
-  background-color: #666;
+  background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   color: #fff;
 }
 .kd-tag-shape-status.kd-tag-expired {
-  border: 1px solid #b2b2b2;
-  color: #b2b2b2;
+  border: 1px solid var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-tag-shape-status.kd-tag-expired:hover {
-  background-color: #b2b2b2;
+  background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   color: #fff;
 }
 .kd-tag-shape-attribute {
   color: #fff;
-  background-color: #276ff5;
+  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-tag-shape-attribute.kd-tag-process {
   color: #fff;
-  background-color: #276ff5;
+  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-tag-shape-attribute.kd-tag-success {
   color: #fff;
-  background-color: #1ba854;
+  background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
 }
 .kd-tag-shape-attribute.kd-tag-warning {
   color: #fff;
-  background-color: #ff991c;
+  background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
 }
 .kd-tag-shape-attribute.kd-tag-error {
   color: #fff;
-  background-color: #fb2323;
+  background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-tag-shape-attribute.kd-tag-end {
   color: #fff;
-  background-color: #666;
+  background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
 }
 .kd-tag-shape-attribute.kd-tag-expired {
   color: #fff;
-  background-color: #b2b2b2;
+  background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-tag-shape-text {
-  color: #276ff5;
+  color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -239,31 +248,31 @@
 .kd-tag-shape-text::before {
   content: '';
   display: block;
-  background-color: #276ff5;
+  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   border-radius: 50%;
 }
 .kd-tag-shape-text::before {
-  width: 6px;
-  height: 6px;
-  margin-right: 6px;
+  width: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
+  height: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
+  margin-right: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
 }
 .kd-tag-shape-text.kd-tag-size-small::before {
-  width: 6px;
-  height: 6px;
-  margin-right: 6px;
+  width: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
+  height: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
+  margin-right: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
 }
 .kd-tag-shape-text.kd-tag-size-middle::before {
-  width: 7px;
-  height: 7px;
-  margin-right: 7px;
+  width: var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
+  height: var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
+  margin-right: var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
 }
 .kd-tag-shape-text.kd-tag-size-large::before {
-  width: 8px;
-  height: 8px;
-  margin-right: 8px;
+  width: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
+  height: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
+  margin-right: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
 }
 .kd-tag-shape-text.kd-tag-process {
-  color: #276ff5;
+  color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -276,11 +285,11 @@
 .kd-tag-shape-text.kd-tag-process::before {
   content: '';
   display: block;
-  background-color: #276ff5;
+  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-process.kd-tag-size-middle {
-  color: #276ff5;
+  color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -293,11 +302,11 @@
 .kd-tag-shape-text.kd-tag-process.kd-tag-size-middle::before {
   content: '';
   display: block;
-  background-color: #276ff5;
+  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-process.kd-tag-size-large {
-  color: #276ff5;
+  color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -310,11 +319,11 @@
 .kd-tag-shape-text.kd-tag-process.kd-tag-size-large::before {
   content: '';
   display: block;
-  background-color: #276ff5;
+  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-success {
-  color: #1ba854;
+  color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -327,11 +336,11 @@
 .kd-tag-shape-text.kd-tag-success::before {
   content: '';
   display: block;
-  background-color: #1ba854;
+  background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-success.kd-tag-size-middle {
-  color: #1ba854;
+  color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -344,11 +353,11 @@
 .kd-tag-shape-text.kd-tag-success.kd-tag-size-middle::before {
   content: '';
   display: block;
-  background-color: #1ba854;
+  background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-success.kd-tag-size-large {
-  color: #1ba854;
+  color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -361,11 +370,11 @@
 .kd-tag-shape-text.kd-tag-success.kd-tag-size-large::before {
   content: '';
   display: block;
-  background-color: #1ba854;
+  background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-warning {
-  color: #ff991c;
+  color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -378,11 +387,11 @@
 .kd-tag-shape-text.kd-tag-warning::before {
   content: '';
   display: block;
-  background-color: #ff991c;
+  background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-warning.kd-tag-size-middle {
-  color: #ff991c;
+  color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -395,11 +404,11 @@
 .kd-tag-shape-text.kd-tag-warning.kd-tag-size-middle::before {
   content: '';
   display: block;
-  background-color: #ff991c;
+  background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-warning.kd-tag-size-large {
-  color: #ff991c;
+  color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -412,11 +421,11 @@
 .kd-tag-shape-text.kd-tag-warning.kd-tag-size-large::before {
   content: '';
   display: block;
-  background-color: #ff991c;
+  background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-error {
-  color: #fb2323;
+  color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -429,11 +438,11 @@
 .kd-tag-shape-text.kd-tag-error::before {
   content: '';
   display: block;
-  background-color: #fb2323;
+  background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-error.kd-tag-size-middle {
-  color: #fb2323;
+  color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -446,11 +455,11 @@
 .kd-tag-shape-text.kd-tag-error.kd-tag-size-middle::before {
   content: '';
   display: block;
-  background-color: #fb2323;
+  background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-error.kd-tag-size-large {
-  color: #fb2323;
+  color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -463,11 +472,11 @@
 .kd-tag-shape-text.kd-tag-error.kd-tag-size-large::before {
   content: '';
   display: block;
-  background-color: #fb2323;
+  background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-end {
-  color: #666;
+  color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -480,11 +489,11 @@
 .kd-tag-shape-text.kd-tag-end::before {
   content: '';
   display: block;
-  background-color: #666;
+  background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-end.kd-tag-size-middle {
-  color: #666;
+  color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -497,11 +506,11 @@
 .kd-tag-shape-text.kd-tag-end.kd-tag-size-middle::before {
   content: '';
   display: block;
-  background-color: #666;
+  background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-end.kd-tag-size-large {
-  color: #666;
+  color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -514,11 +523,11 @@
 .kd-tag-shape-text.kd-tag-end.kd-tag-size-large::before {
   content: '';
   display: block;
-  background-color: #666;
+  background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-expired {
-  color: #b2b2b2;
+  color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -531,11 +540,11 @@
 .kd-tag-shape-text.kd-tag-expired::before {
   content: '';
   display: block;
-  background-color: #b2b2b2;
+  background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-expired.kd-tag-size-middle {
-  color: #b2b2b2;
+  color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -548,11 +557,11 @@
 .kd-tag-shape-text.kd-tag-expired.kd-tag-size-middle::before {
   content: '';
   display: block;
-  background-color: #b2b2b2;
+  background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   border-radius: 50%;
 }
 .kd-tag-shape-text.kd-tag-expired.kd-tag-size-large {
-  color: #b2b2b2;
+  color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -565,23 +574,23 @@
 .kd-tag-shape-text.kd-tag-expired.kd-tag-size-large::before {
   content: '';
   display: block;
-  background-color: #b2b2b2;
+  background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   border-radius: 50%;
 }
 .kd-tag-shape-edit {
-  border: 1px solid #ccc;
+  border: 1px solid var(--kd-c-tag-edit-color-border, var(--kd-g-color-text-placeholder, #ccc));
   border-radius: 2px;
-  line-height: 20px;
+  line-height: var(--kd-c-tag-sizing-height-middle, 20px);
   padding-left: 6px;
   padding-right: 6px;
-  color: #212121;
+  color: var(--kd-c-tag-edit-color-text, var(--kd-g-color-text-primary, #212121));
 }
 .kd-tag-shape-edit:not(.kd-tag-closable-disabled):hover {
-  border-color: #5582f3;
+  border-color: var(--kd-c-tag-edit-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tag-shape-edit:not(.kd-tag-closable-disabled):hover .kd-tag-closeWrapper {
-  background-color: #5582f3;
-  color: #fff;
+  background-color: var(--kd-c-tag-edit-cloesWrapper-color-background-hover, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-tag-edit-cloesWrapper-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-tag-shape-edit.kd-tag-closable {
   padding-right: 0;
@@ -590,38 +599,38 @@
   cursor: pointer;
 }
 .kd-tag-has-color {
-  color: #fff;
+  color: var(--kd-c-tag-attribute-color-text, var(--kd-g-color-white, #fff));
 }
 .kd-tag-text {
   margin-left: 6px;
 }
 .kd-tag-closable-disabled {
-  background-color: #f5f5f5;
-  border-color: #d9d9d9;
-  color: #d9d9d9;
+  background-color: var(--kd-c-tag-edit-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+  border-color: var(--kd-c-tag-edit-color-background-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-tag-edit-color-text-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   cursor: not-allowed;
 }
 .kd-tag-closable.kd-tag-size-middle {
-  line-height: 20px;
+  line-height: var(--kd-c-tag-sizing-height-middle, 20px);
 }
 .kd-tag-closable.kd-tag-size-middle .kd-tag-closeWrapper {
-  width: 18px;
-  height: 18px;
+  width: calc(var(--kd-c-tag-sizing-height-middle, 20px) - 2px);
+  height: calc(var(--kd-c-tag-sizing-height-middle, 20px) - 2px);
 }
 .kd-tag-closable.kd-tag-size-large {
-  line-height: 24px;
-  padding-left: 8px;
+  line-height: var(--kd-c-tag-sizing-height-large, 24px);
+  padding-left: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
 }
 .kd-tag-closable.kd-tag-size-large .kd-tag-closeWrapper {
-  width: 22px;
-  height: 22px;
+  width: calc(var(--kd-c-tag-sizing-height-large, 24px) - 2px);
+  height: calc(var(--kd-c-tag-sizing-height-large, 24px) - 2px);
 }
 .kd-tag-closable.kd-tag-size-large .kd-tag-closeWrapper .kd-tag-close-icon {
   font-size: 14px;
 }
 .kd-tag-closeWrapper {
-  width: 18px;
-  height: 18px;
+  width: calc(var(--kd-c-tag-sizing-height-middle, 20px) - 2px);
+  height: calc(var(--kd-c-tag-sizing-height-middle, 20px) - 2px);
   margin-left: 4px;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -632,8 +641,8 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-transition: color 0.3s, background-color 0.3s;
-  transition: color 0.3s, background-color 0.3s;
+  -webkit-transition: color var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-tag-close-icon {
   cursor: pointer;

package/lib/tag/style/index.less

@@ -8,7 +8,7 @@
 
 .@{tag-prefix-cls} {
   &-size-small {
-    .tag-size(@tag-small-font-size, @tag-height, @tag-small-padding-horizontal);
+    .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal);
   }
 
   &-size-middle {
@@ -19,7 +19,7 @@
     .tag-size(@tag-large-font-size, @tag-large-height, @tag-large-padding-horizontal);
   }
   
-  transition: all @transition-duration;
+  transition: all @tag-g-motion-duration;
   // 状态标签
   &-shape-status {
     .tag-status(@tag-process-color)
@@ -67,17 +67,17 @@
 
   // 可关闭的标签
   &-shape-edit {
-    border: 1px solid @placeholder-text-color;
+    border: 1px solid @tag-edit-g-color-border;
     border-radius: 2px;
-    line-height: @tag-height;
+    line-height: @tag-middle-height;
     padding-left: 6px;
     padding-right: 6px;
-    color: @primary-text-color;
+    color: @tag-edit-g-text-color;
     &:not(.@{tag-prefix-cls}-closable-disabled):hover {
-      border-color: @theme-color;
+      border-color: @tag-edit-g-color-border-hover;
       .@{tag-prefix-cls}-closeWrapper {
-        background-color: @theme-color;
-        color: @white;
+        background-color: @tag-edit-cloesWrapper-g-color-background-hover;
+        color: @tag-edit-cloesWrapper-g-text-color-hover;
       }
     }
 
@@ -93,7 +93,7 @@
 
   // 自定义标签颜色
   &-has-color {
-    color: @white;
+    color: @tag-attribute-g-text-color;
   }
 
   // 图标设置外边距
@@ -102,17 +102,17 @@
   }
 
   &-closable-disabled {
-    background-color: @disabled-contain-bg;
-    border-color: @strong-border-color;
-    color: @strong-border-color;
+    background-color: @tag-edit-g-color-background-disabled;
+    border-color: @tag-edit-g-color-border-disabled;
+    color: @tag-edit-g-text-color-disabled;
     cursor: not-allowed;
   }
   &-closable.@{tag-prefix-cls}-size-middle {
     line-height: @tag-middle-height;
 
     .@{tag-prefix-cls}-closeWrapper {
-      width: @tag-middle-height - 2;
-      height: @tag-middle-height - 2;
+      width: calc(@tag-middle-height - 2px);
+      height: calc(@tag-middle-height - 2px);
     }
   }
   &-closable.@{tag-prefix-cls}-size-large {
@@ -120,8 +120,8 @@
     padding-left: @tag-large-padding-horizontal;
 
     .@{tag-prefix-cls}-closeWrapper {
-      width: @tag-large-height - 2;
-      height: @tag-large-height - 2;
+      width: calc(@tag-large-height - 2px);
+      height: calc(@tag-large-height - 2px);
       
       .@{tag-prefix-cls}-close-icon {
         font-size: 14px;
@@ -129,13 +129,13 @@
     }
   }
   &-closeWrapper {
-    width: @tag-height - 2;
-    height: @tag-height - 2;
+    width: calc(@tag-middle-height - 2px);
+    height: calc(@tag-middle-height - 2px);
     margin-left: 4px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    transition: color @transition-duration, background-color @transition-duration;
+    transition: color @tag-g-motion-duration, background-color @tag-g-motion-duration;
   }
   &-close-icon {
     cursor: pointer;

package/lib/tag/style/mixin.less

@@ -1,3 +1,4 @@
+@import './token.less';
 
 // code component mixin here
 .tag-size(@size, @height, @padding) {
@@ -8,7 +9,7 @@
   align-items: center;
   vertical-align: middle;
   padding: 0 @padding;
-  border-radius:  @height / 2;
+  border-radius:  calc(@height / 2);
 }
 .tag-status(@color) {
   border: 1px solid @color;