@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/cascader/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -102,23 +111,23 @@
   cursor: pointer;
 }
 .kd-cascader-picker:focus > .kd-cascader-picker-input {
-  border-color: #5582f3;
+  border-color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
 .kd-cascader-picker:focus > .kd-cascader-picker-input i[class*="kdicon"] {
-  color: #5582f3;
+  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
 .kd-cascader-picker:hover > .kd-cascader-picker-input i[class*="kdicon"] {
-  color: #5582f3;
+  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-cascader-picker.disabled .kd-cascader-picker-input {
   cursor: not-allowed;
-  border-color: #d9d9d9;
+  border-color: var(--kd-g-color-border-strong, #d9d9d9);
 }
 .kd-cascader-picker.disabled .kd-cascader-picker-input .kd-input-suffix,
 .kd-cascader-picker.disabled .kd-cascader-picker-input i[class*="kdicon"] {
-  color: #b2b2b2;
+  color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-cascader-picker-label {
   -webkit-box-sizing: border-box;
@@ -146,10 +155,10 @@
   cursor: pointer;
 }
 .kd-cascader-picker-input.expand {
-  border-color: #5582f3;
+  border-color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-cascader-picker-input.expand i[class*="kdicon"] {
-  color: #5582f3;
+  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
@@ -179,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: #5582f3;
+  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -196,15 +205,16 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  color: #212121;
-  border-radius: 2px;
-  font-size: 12px;
-  background-color: #fff;
+  color: var(--kd-c-cascader-color-text, var(--kd-g-color-text-primary, #212121));
+  border-radius: var(--kd-c-cascader-radius-border, var(--kd-g-radius-border, 2px));
+  font-size: var(--kd-c-cascader-font-size, var(--kd-g-font-size-small, 12px));
+  font-weight: var(--kd-c-cascader-font-weight, 'normal');
+  background-color: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
   -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
           box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
   opacity: 1;
   visibility: visible;
-  z-index: 1050;
+  z-index: var(--kd-g-z-index-popper, 1050);
 }
 .kd-cascader-menus.hidden {
   opacity: 0;
@@ -212,14 +222,14 @@
 }
 .kd-cascader-menus .kd-cascader-menu {
   display: inline-table;
-  height: 196px;
-  min-width: 116px;
+  height: var(--kd-c-cascader-sizing-height, 192px);
+  min-width: var(--kd-c-cascader-menu-sizing-min-width, 116px);
   margin: 0;
-  padding: 0;
+  padding: var(--kd-c-cascader-menu-spacing-padding-vertical, 8px) 0;
   overflow-y: auto;
 }
 .kd-cascader-menus .kd-cascader-menu:not(:first-child) {
-  border-left: 1px solid #d9d9d9;
+  border-left: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
 }
 .kd-cascader-menus .kd-cascader-menu-item {
   display: -webkit-box;
@@ -228,23 +238,22 @@
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  padding: 0 12px;
-  height: 32px;
-  line-height: 32px;
+  padding: 0 var(--kd-c-cascader-menu-item-spacing-padding-horizontal, 12px);
+  line-height: var(--kd-c-cascader-menu-item-sizing-height, 32px);
   cursor: pointer;
 }
 .kd-cascader-menus .kd-cascader-menu-item:not(.disabled, .selected):hover {
-  background-color: #f5f5f5;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  background-color: var(--kd-c-cascader-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
+  -webkit-transition: all calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease, cubic-bezier(0.4, 0, 0.6, 1));
+  transition: all calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease, cubic-bezier(0.4, 0, 0.6, 1));
 }
 .kd-cascader-menus .kd-cascader-menu-item.disabled {
-  color: #b2b2b2;
+  color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-cascader-menus .kd-cascader-menu-item.selected {
-  color: #5582f3;
-  background-color: #f2f9ff;
+  color: var(--kd-c-cascader-color-text-selected, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-cascader-color-background-selected, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
 .kd-cascader-menus .kd-cascader-menu-item-label {
   width: 72px;

package/es/cascader/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './token.less';
 
 @cascader-picker-prefix-cls: ~'@{kd-prefix}-cascader-picker';
 @cascader-menus-prefix-cls: ~'@{kd-prefix}-cascader-menus';
@@ -12,29 +13,29 @@
   cursor: pointer;
 
   &:focus > &-input {
-    border-color: @theme-color;
+    border-color: @cascader-active-color;
 
     .@{kd-prefix}-input-suffix,
     i[class*="kdicon"] {
-      color: @theme-color;
+      color: @cascader-active-color;
     }
   }
 
   &:hover > &-input {
     .@{kd-prefix}-input-suffix,
     i[class*="kdicon"] {
-      color: @theme-color;
+      color: @cascader-active-color;
     }
   }
 
   &.disabled {
     .@{cascader-picker-prefix-cls}-input {
       cursor: not-allowed;
-      border-color: @strong-border-color;
+      border-color: @color-border-strong;
 
       .@{kd-prefix}-input-suffix,
       i[class*="kdicon"] {
-        color: @disabled-color;
+        color: @cascader-disabled-color;
       }
     }
   }
@@ -62,10 +63,10 @@
     }
 
     &.expand {
-      border-color: @theme-color;
+      border-color: @cascader-active-color;
 
       i[class*="kdicon"] {
-        color: @theme-color;
+        color: @cascader-active-color;
         transform: rotate(180deg);
       }
     }
@@ -98,7 +99,7 @@
     opacity: 0;
     cursor: pointer;
     visibility: hidden;
-    color: @theme-color;
+    color: @cascader-active-color;
     transition: all 0.1s;
     transform-origin: 50% 50%;
     transform: scale(0.9) translateY(-50%);
@@ -108,13 +109,14 @@
 .@{cascader-menus-prefix-cls} {
   .reset-component;
   color: @cascader-color;
-  border-radius: @radius-size;
+  border-radius: @cascader-radius-size;
   font-size: @cascader-font-size;
-  background-color: @cascader-background-color;
-  box-shadow: 0 1px @cascader-box-shadow-blur 0 rgba(0, 0, 0, 0.3);
+  font-weight: @cascader-font-weight;
+  background-color: @cascader-bg-color;
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
   opacity: 1;
   visibility: visible;
-  z-index: @zIndex-popper;
+  z-index: @z-index-popper;
 
   &.hidden {
     opacity: 0;
@@ -123,37 +125,36 @@
 
   .@{cascader-menu-prefix-cls} {
     display: inline-table;
-    height: @cascader-menu-height;
+    height: @cascader-height;
     min-width: @cascader-menu-min-width;
     margin: 0;
-    padding: 0;
+    padding: @cascader-menu-padding-vertical 0;
     overflow-y: auto;
 
     &:not(:first-child) {
-      border-left: 1px solid @strong-border-color;
+      border-left: 1px solid @color-border-strong;
     }
 
     &-item {
       display: flex;
       justify-content: space-between;
-      padding: 0 12px;
-      height: 32px;
-      line-height: 32px;
+      padding: 0 @cascader-menu-item-padding-horizontal;
+      line-height: @cascader-menu-item-height;
       cursor: pointer;
 
       &:not(.disabled, .selected):hover {
-        background-color: @hover-color;
-        transition: all calc(@transition-duration - 0.1s) @ease;
+        background-color: @cascader-hover-bg-color;
+        transition: all calc(@duration-promptly - 0.1s) @motion-ease;
       }
 
       &.disabled {
-        color: @disabled-color;
+        color: @cascader-disabled-color;
         cursor: not-allowed;
       }
 
       &.selected {
-        color: @theme-color;
-        background-color: @ongoing-bg-color;
+        color: @cascader-selected-color;
+        background-color: @cascader-selected-bg-color;
       }
 
       &-label {

package/es/cascader/style/token.less

@@ -0,0 +1,28 @@
+@import '../../style/themes/token.less';
+
+@cascader-prefix: '--@{kd-prefix}-c-cascader';
+
+// sizing
+@cascader-height: var(~'@{cascader-prefix}-sizing-height', 192px);
+@cascader-menu-min-width: var(~'@{cascader-prefix}-menu-sizing-min-width', 116px);
+@cascader-menu-item-height: var(~'@{cascader-prefix}-menu-item-sizing-height', 32px);
+
+// spacing
+@cascader-menu-padding-vertical: var(~'@{cascader-prefix}-menu-spacing-padding-vertical', 8px);
+@cascader-menu-item-padding-horizontal: var(~'@{cascader-prefix}-menu-item-spacing-padding-horizontal', 12px);
+
+// colors
+@cascader-active-color: var(~'@{cascader-prefix}-color-active', @color-theme);
+@cascader-color: var(~'@{cascader-prefix}-color-text', @color-text-primary);
+@cascader-bg-color: var(~'@{cascader-prefix}-color-background', @color-white);
+@cascader-hover-bg-color: var(~'@{cascader-prefix}-color-background-hover', @color-hover);
+@cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
+@cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
+@cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
+
+// font
+@cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);
+@cascader-font-weight: var(~'@{cascader-prefix}-font-weight', 'normal');
+
+// radius
+@cascader-radius-size: var(~'@{cascader-prefix}-radius-border', @radius-border);

package/es/checkbox/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-checkbox {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -110,25 +119,25 @@
   text-overflow: ellipsis;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  font-size: 12px;
-  color: #212121;
-  height: 36px;
+  font-size: var(--kd-c-checkbox-font-size, var(--kd-g-font-size-small, 12px));
+  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  height: var(--kd-c-checkbox-sizing-height-middle, 36px);
 }
 .kd-checkbox-no-child {
-  height: 16px;
-  width: 16px;
+  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
+  width: var(--kd-c-checkbox-default-input-sizing-width, 16px);
 }
 .kd-checkbox-small {
-  height: 32px;
+  height: var(--kd-c-checkbox-sizing-height-small, 32px);
 }
 .kd-checkbox-middle {
-  height: 36px;
+  height: var(--kd-c-checkbox-sizing-height-middle, 36px);
 }
 .kd-checkbox-large {
-  height: 40px;
+  height: var(--kd-c-checkbox-sizing-height-large, 40px);
 }
 .kd-checkbox-group > *:not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--kd-c-checkbox-group-spacing-margin-right, 8px);
 }
 .kd-checkbox-input {
   margin: 0;
@@ -156,10 +165,10 @@
 }
 .kd-checkbox-square {
   border-radius: 2px;
-  border: 1px solid #d9d9d9;
-  padding: 0 20px;
-  -webkit-transition: color 0.3s, border-color 0.3s;
-  transition: color 0.3s, border-color 0.3s;
+  border: 1px solid var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  padding: var(--kd-c-checkbox-square-spacing-padding, 0 20px);
+  -webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-checkbox-square:not(.kd-checkbox-square-disabled)::after {
   content: '';
@@ -170,12 +179,12 @@
   left: 0;
   border-radius: inherit;
   opacity: 0.2;
-  -webkit-box-shadow: 0 0 0 0 #5582f3;
-          box-shadow: 0 0 0 0 #5582f3;
+  -webkit-box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
+          box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-checkbox-square:hover {
-  color: #5582f3;
-  border-color: #5582f3;
+  color: var(--kd-c-checkbox-color-text-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-checkbox-square-triangle,
 .kd-checkbox-square-triangle-checked {
@@ -186,17 +195,17 @@
   right: 0;
   bottom: 0;
   border-style: solid;
-  border-width: 0 0 18px 18px;
+  border-width: 0 0 var(--kd-c-checkbox-square-triangle-sizing-height, 18px) var(--kd-c-checkbox-square-triangle-sizing-width, 18px);
   border-top-color: transparent;
   border-right-color: transparent;
   border-left-color: transparent;
-  border-bottom-color: #5582f3;
+  border-bottom-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-checkbox-square-triangle {
-  -webkit-animation: kdZoomBounceLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: kdZoomBounceLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
+  -webkit-animation: kdZoomBounceLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomBounceLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-transition: all var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.4, 0, 0.6, 1);
   visibility: hidden;
   opacity: 0;
 }
@@ -204,8 +213,8 @@
   position: absolute;
   height: 9px;
   width: 11px;
-  color: #fff;
-  font-size: 12px;
+  color: var(--kd-c-checkbox-square-input-icon-color, #fff);
+  font-size: var(--kd-c-checkbox-default-input-icon-font-size, 12px);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -221,43 +230,43 @@
 .kd-checkbox-square-inner-icon {
   font-size: inherit;
   line-height: 100%;
-  -webkit-animation: kdZoomLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-          animation: kdZoomLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+  -webkit-animation: kdZoomLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+          animation: kdZoomLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-square-triangle-disabled {
-  border-bottom-color: #b2b2b2;
+  border-bottom-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-checkbox-square-disabled,
 .kd-checkbox-square-disabled:hover {
-  border-color: #d9d9d9;
-  color: #212121;
+  border-color: var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
   cursor: not-allowed !important;
 }
 .kd-checkbox-square-checked {
-  border-color: #5582f3;
+  border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-checkbox-square-checked:not(.kd-checkbox-square-checked-disabled)::after {
-  -webkit-animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-animation: fadeEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: fadeEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
 }
 .kd-checkbox-square-checked .kd-checkbox-square-triangle-checked:not(.kd-checkbox-square-disabled) {
-  -webkit-animation: kdZoomBounceEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-          animation: kdZoomBounceEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  -webkit-animation: kdZoomBounceEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+          animation: kdZoomBounceEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-checkbox-square-checked .kd-checkbox-square-inner-icon:not(.kd-checkbox-square-disabled) {
-  -webkit-animation: kdZoomEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-          animation: kdZoomEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+  -webkit-animation: kdZoomEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+          animation: kdZoomEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-square-checked-disabled {
-  background-color: #b2b2b2 !important;
-  border-color: #b2b2b2 !important;
+  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
   cursor: not-allowed !important;
 }
 .kd-checkbox-square-wrapper {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: 16px;
+  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
   width: 0;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -265,21 +274,21 @@
 }
 .kd-checkbox-default {
   border: none;
-  padding: 0;
-  -webkit-transition: color 0.3s, border-color 0.3s;
-  transition: color 0.3s, border-color 0.3s;
+  padding: var(--kd-c-checkbox-default-spacing-padding, 0);
+  -webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-checkbox-default:hover,
 .kd-checkbox-default:hover .kd-checkbox-default-wrapper {
-  color: #5582f3;
-  border-color: #5582f3;
+  color: var(--kd-c-checkbox-color-text-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
   cursor: pointer;
 }
 .kd-checkbox-default-disabled,
 .kd-checkbox-default-disabled:hover,
 .kd-checkbox-default-disabled:hover .kd-checkbox-default-wrapper {
-  color: #212121;
-  border-color: #d9d9d9;
+  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  border-color: var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   cursor: not-allowed !important;
 }
 .kd-checkbox-default-wrapper {
@@ -287,13 +296,13 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  background-color: #fff;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
+  background-color: var(--kd-c-checkbox-color-background, var(--kd-g-color-background, #fff));
+  border: var(--kd-c-checkbox-default-input-border-width, 1px) solid var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-radius: var(--kd-c-checkbox-default-input-radius-border, 2px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  -webkit-transition: color 0.3s, border-color 0.3s;
-  transition: color 0.3s, border-color 0.3s;
+  -webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-checkbox-default-wrapper:not(.kd-checkbox-default-wrapper-disabled)::after {
   content: '';
@@ -304,43 +313,43 @@
   left: 0;
   border-radius: inherit;
   opacity: 0.2;
-  -webkit-box-shadow: 0 0 0 0 #5582f3;
-          box-shadow: 0 0 0 0 #5582f3;
+  -webkit-box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
+          box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-checkbox-default-wrapper-size {
-  height: 16px;
-  width: 16px;
+  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
+  width: var(--kd-c-checkbox-default-input-sizing-width, 16px);
 }
 .kd-checkbox-default-margin {
-  margin-right: 8px;
+  margin-right: var(--kd-c-checkbox-default-input-spacing-margin-right, 8px);
 }
 .kd-checkbox-default-no-child {
   height: 100%;
   width: 100%;
 }
 .kd-checkbox-default-checked-disabled {
-  background-color: #b2b2b2 !important;
-  border-color: #b2b2b2 !important;
+  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
   cursor: not-allowed !important;
 }
 .kd-checkbox-default-checked {
-  background-color: #5582f3;
-  border-color: #5582f3;
-  -webkit-transition: background-color calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), border-color calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: background-color calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), border-color calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+  background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
+  -webkit-transition: background-color calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), border-color calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+  transition: background-color calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), border-color calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-default-checked:not(.kd-checkbox-default-checked-disabled)::after {
-  -webkit-animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-animation: fadeEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: fadeEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
 }
 .kd-checkbox-default-inner:not(.kd-checkbox-default-checked-disabled .kd-checkbox-default-inner) {
-  -webkit-animation: kdZoomBounceDefaultEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
-          animation: kdZoomBounceDefaultEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
+  -webkit-animation: kdZoomBounceDefaultEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
+          animation: kdZoomBounceDefaultEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
 }
 .kd-checkbox-default-inner {
   position: absolute;
-  color: #fff;
-  font-size: 14px;
+  color: var(--kd-c-checkbox-default-input-icon-color, #fff);
+  font-size: var(--kd-c-checkbox-default-input-icon-font-size, 14px);
   height: 100%;
   width: 100%;
   top: 5%;
@@ -358,19 +367,16 @@
   font-size: inherit;
   line-height: 100%;
 }
-.kd-checkbox-default-indeterminate {
-  background-color: #5582f3;
-  border-color: #5582f3;
-}
 .kd-checkbox-default-indeterminate::before {
-  background-color: #fff;
   position: absolute;
-  width: 70%;
-  height: 2px;
-  border-radius: 1px;
   top: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
   left: 50%;
-  content: ' ';
+  width: 8px;
+  height: 8px;
+  background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
+  border: 0;
+  -webkit-transform: translate(-50%, -50%) scale(1);
+          transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+  content: " ";
 }