@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/steps/style/token.less

@@ -0,0 +1,31 @@
+@import '../../style/themes/token.less';
+
+@steps-prefix: '--@{kd-prefix}-c-steps';
+
+@steps-duration-promptly: var(~'@{steps-prefix}-duration-promptly', @duration-promptly);
+@steps-transition-fn: cubic-bezier(0.48, 0.04, 0.52, 0.96);
+
+
+
+// color
+@steps-color-completed: var(~'@{steps-prefix}-color-completed', @color-theme);//已经完成
+@steps-color-error: var(~'@{steps-prefix}-color-error', @color-error);
+@steps-color-wait:  var(~'@{steps-prefix}-color-wait', @color-text-secondary);//未开始  等待
+@steps-color-white: var(~'@{steps-prefix}-color-white',@color-white);
+@steps-color-background-process-icon: var(~'@{steps-prefix}-icon-color-background', @color-theme);//图标的颜色
+
+
+// font
+@steps-font-size: var(~'@{steps-prefix}-font-size', @font-size-small); // 文字大小
+
+
+// sizing
+@steps-icon-sizing-width: var(~'@{steps-prefix}-icon-sizing-width', 28px);//图标的大小
+@steps-line-sizing-height: var(~'@{steps-prefix}-line-sizing-height', 4px);//连接线高度
+@steps-horizontal-description-sizing-height: var(~'@{steps-prefix}-horizontal-description-sizing-height', 60px);//内容部分高度 横向
+@steps-vertical-description-sizing-width: var(~'@{steps-prefix}-vertical-description-sizing-width', 200px);//内容部分宽度    纵向
+
+
+
+
+

package/lib/style/components.less

@@ -23,6 +23,7 @@
 @import "../input/style/index.less";
 @import "../input-number/style/index.less";
 @import "../layout/style/index.less";
+@import "../link/style/index.less";
 @import "../menu/style/index.less";
 @import "../message/style/index.less";
 @import "../modal/style/index.less";

package/lib/style/mixins/index.less

@@ -1,9 +1,10 @@
 // Mixins
 //----------------------------------------
 @import 'reset';
+@import '../themes/token.less';
 
 /* 多行显示省略号 */
-.multipleEllipsis(@n: n) {
+.multipleEllipsis(@n) {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -19,7 +20,7 @@
 }
 
 /** 浮层箭头样式 **/
-.popperArrow(@popperBg: popperBg, @offset: offset, @blur: blur,) {
+.popperArrow(@popperBg, @offset, @blur,) {
   &.arrow {
     &::before {
       position: absolute;
@@ -40,7 +41,7 @@
       left: 0;
       content: '';
       background: @popperBg;
-      border-radius: @radius-size;
+      border-radius: @radius-border;
     }
 
     &.bottomLeft,
@@ -49,8 +50,8 @@
       &::before {
         left: var(--arrowLeft);
         top: var(--arrowSpill);
-        box-shadow: -2px -2px @blur - 1px rgba(0, 0, 0, 0.1);
-        border-color: @white transparent transparent @white;
+        box-shadow: -2px -2px calc(@blur - 1px) rgba(0, 0, 0, 0.1);
+        border-color: @color-white transparent transparent @color-white;
       }
     }
 
@@ -60,8 +61,8 @@
       &::before {
         left: var(--arrowLeft);
         bottom: var(--arrowSpill);
-        box-shadow: 3px 3px @blur + 1px rgba(0, 0, 0, 0.15);
-        border-color: transparent @white @white transparent;
+        box-shadow: 3px 3px calc(@blur + 1px) rgba(0, 0, 0, 0.15);
+        border-color: transparent @color-white @color-white transparent;
       }
     }
 
@@ -72,7 +73,7 @@
         top: var(--arrowTop);
         right: var(--arrowSpill);
         box-shadow: 3px 0 @blur rgba(0, 0, 0, 0.12), 0 -2px @blur rgba(204, 149, 149, 0.12);
-        border-color: @white @white transparent transparent;
+        border-color: @color-white @color-white transparent transparent;
       }
     }
 
@@ -83,7 +84,7 @@
         top: var(--arrowTop);
         left: var(--arrowSpill);
         box-shadow: 0 3px @blur rgba(0, 0, 0, 0.1), -2px 0 @blur rgba(0, 0, 0, 0.1);
-        border-color: transparent transparent @white @white;
+        border-color: transparent transparent @color-white @color-white;
       }
     }
   }

package/lib/style/mixins/overlay.less

@@ -3,7 +3,7 @@
 .overlay(@bgcolor, @isUseMaskZindex) {
   position: fixed;
   background-color: @bgcolor;
-  z-index: if(boolean(@isUseMaskZindex), @zIndex-masker, auto);
+  z-index: if(boolean(@isUseMaskZindex), @z-index-masker, auto);
   .overall-postion()
 }
 
@@ -18,5 +18,5 @@
   width: 100%;
   height: 100%;
   background-color: @bgcolor;
-  z-index: if(boolean(@isUseMaskZindex), @zIndex-masker, auto);
+  z-index: if(boolean(@isUseMaskZindex), @z-index-masker, auto);
 }

package/lib/style/themes/default.less

@@ -45,22 +45,27 @@
 @primary-text-color2: rgba(255, 255, 255, 1); // 一级文本
 @secondary-text-color: #666; // 二级文本
 @secondary-text-color2: rgba(255, 255, 255, 0.65); // 二级文本
+@secondary-text-color3: rgba(102, 102, 102, 0.65); // 二级文本
 @third-text-color: #999; // 三级文本
 @third-text-color2: rgba(255, 255, 255, 0.4); // 三级文本
 @placeholder-text-color: #ccc; // 占位符文本
 @placeholder-text-color2: rgba(255, 255, 255, 0.3); // 占位符文本
 @bg: #fff; // 底色白背景
 @bg2: #f2f2f2; // 底色灰背景
+@bg3: rgba(255, 255, 255, 0.65); // 次级底色背景
 @contain-bg: #fafafa; // 容器内的灰背景
 @radius-size: 2px; // 圆角值
 @input-color: #999; // 线型录入的默认态
 @strong-border-color: #d9d9d9; // 强线条 --带操作
 @strong-border-color-1: #d9d9d9; // 强线条 --分割内容/容器包裹线
+@strong-border-color-2: rgba(217, 217, 217, 0.65); // 次级边框
 @weak-border-color: #e5e5e5; // 弱线条 -- 需要多层级时
+@logo-color-1: #2386ee;
+@logo-color-2: #00ccfe;
+@logo-color-3: #05c8c8;
+@logo-color-4: #a06eff;
 // @shadow-on-hover: ; // 悬停时阴影
 @white: #fff;
-@dirList: left, top, bottom, right;
-@line-height-base: 1.5715;
 /* -----------  color  ——————---- end */
 
 /* -----------  motion  ——————---- start */
@@ -70,7 +75,9 @@
 /* -----------  motion  ——————---- end */
 
 /* -----------  transition  ——————---- start */
+@transition-duration-slowly: 0.4s;
 @transition-duration: 0.3s;
+@transition-duration-quickly: 0.2s;
 /* -----------  transition  ——————---- end */
 
 /* -----------  font  ——————---- start */
@@ -97,6 +104,7 @@
 /* -----------  zIndex  ——————---- end */
 
 /* -----------  Button  ——————---- start */
+
 @btn-border-width: 1px;
 @btn-border-style: solid;
 @btn-primary-font-color: @white; // 基础文字颜色
@@ -107,9 +115,9 @@
 @btn-ghost-background-color: transparent; // 幽灵背景颜色
 @btn-ghost-border-color: @strong-border-color; //幽灵边框颜色
 
-@btn-second-font-color: rgba(@secondary-text-color, 65%); // 次要文字颜色
-@btn-second-background-color: rgba(@white, 65%); // 次要背景颜色
-@btn-second-border-color: rgba(@strong-border-color, 65%); // 次要边框颜色
+@btn-second-font-color: @secondary-text-color3; // 次要文字颜色
+@btn-second-background-color: @bg3; // 次要背景颜色
+@btn-second-border-color: @strong-border-color-2; // 次要边框颜色
 
 @btn-link-font-color: @link-color; // 链接文字颜色
 
@@ -293,6 +301,7 @@
 @popconfirm-max-width: 500px;
 @popconfirm-min-height: 98px;
 @popconfirm-max-height: 400px;
+
 @popconfirm-title-line-height: 21px;
 @popconfirm-color: @primary-text-color;
 @popconfirm-font-size: @small-font-size;
@@ -305,6 +314,7 @@
 /* -----------  Popconfirm  ——————---- end */
 
 /* -----------  Progress  ——————---- start */
+
 @progress-remaining-color: #e5e5e5;
 @progress-default-color: @ongoing-color;
 @progress-success-color: @success-color;
@@ -313,7 +323,6 @@
 @progress-line-stroke-width: 8px;
 @progress-line-icon-font-size: 16px;
 @progress-line-text-font-size: 16px;
-@progress-line-text-width: 3 * @progress-line-text-font-size;
 @progress-line-special-text-font-size: 16px;
 @progress-line-text-margin-left: 8px;
 @progress-circle-stroke-width: 4px;
@@ -340,6 +349,7 @@
 /* -----------  Pagination  ——————---- end */
 
 /* -----------  Timeline  ——————---- start */
+
 @timeline-gap: 8px;
 @timeline-width: 1px;
 @timeline-dot-size: 9px;
@@ -434,7 +444,7 @@
 @transfer-padding-base: 14px;
 @transfer-font-size-base: 12px;
 @transfer-list-item-height: 32px;
-@transfer-list-content-height: @transfer-list-item-height * 10;
+// @transfer-list-content-height: @transfer-list-item-height * 10;
 @transfer-list-item-hover-bg: @hover-color;
 @transfer-list-item-checked: @theme-color;
 @transfer-list-item-disabled: @disabled-color;
@@ -452,7 +462,7 @@
 @date-font-color: @secondary-text-color;
 @date-focus-color: @primary-text-color;
 @date-background-color: @white;
-@date-border-width: 1px;
+@date-sizing-border: 1px;
 @date-width: 230px;
 @date-padding-suffix: 10px;
 @date-panel-header-height: 36px;
@@ -568,10 +578,10 @@
 /* -----------  Spin  ——————---- start */
 @spin-page-size: 15px;
 @spin-container-size: 5px;
-@spin-dot-color-first: #2386ee;
-@spin-dot-color-second: #00ccfe;
-@spin-dot-color-third: #05c8c8;
-@spin-dot-color-fourth: #a06eff;
+@spin-dot-color-first: @logo-color-1;
+@spin-dot-color-second: @logo-color-2;
+@spin-dot-color-third: @logo-color-3;
+@spin-dot-color-fourth: @logo-color-4;
 /* -----------  Spin  ——————---- end */
 
 /* -----------  Spin  ——————---- start */

package/lib/style/themes/token.less

@@ -0,0 +1,128 @@
+@global-custom-prefix: '--@{kd-prefix}-g';
+
+@color-theme: var(~'@{global-custom-prefix}-color-theme', @theme-color);
+@color-theme-1: var(~'@{global-custom-prefix}-color-theme-1', @theme-color-level1);
+@color-theme-2: var(~'@{global-custom-prefix}-color-theme-2', @theme-color-level2);
+@color-theme-3: var(~'@{global-custom-prefix}-color-theme-3', @theme-color-level3);
+@color-theme-4: var(~'@{global-custom-prefix}-color-theme-4', @theme-color-level4);
+@color-theme-5: var(~'@{global-custom-prefix}-color-theme-5', @theme-color-level5);
+@color-theme-6: var(~'@{global-custom-prefix}-color-theme-6', @theme-color-level6);
+@color-theme-7: var(~'@{global-custom-prefix}-color-theme-7', @theme-color-level7);
+@color-theme-8: var(~'@{global-custom-prefix}-color-theme-8', @theme-color-level8);
+@color-theme-9: var(~'@{global-custom-prefix}-color-theme-9', @theme-color-level9);
+
+
+@color-theme-disabled: @color-theme-3;
+@color-theme-hover: @color-theme-5;
+@color-theme-click: @color-theme-7;// 点击色
+@color-theme-light-active: @color-theme-1; // 浅色选中
+@color-theme-dark-active: @color-theme; // 深色选中
+
+// hover
+@color-hover: var(~'@{global-custom-prefix}-color-hover', @hover-color);
+@color-background-contain-disabled: var(~'@{global-custom-prefix}-color-background-contain-disabled', @disabled-contain-bg); // 有疑问 contain
+
+// success
+@color-success: var(~'@{global-custom-prefix}-color-success', @success-color);
+@color-background-success: var(~'@{global-custom-prefix}-color-background-success', @success-bg-color);
+@color-border-success: var(~'@{global-custom-prefix}-color-border-success', @success-border-color);
+
+
+// warning
+@color-warning: var(~'@{global-custom-prefix}-color-warning', @warning-color);
+@color-background-warning: var(~'@{global-custom-prefix}-color-background-warning', @warning-bg-color);
+@color-border-warning: var(~'@{global-custom-prefix}-color-border-warning', @warning-border-color);
+
+// error
+@color-error: var(~'@{global-custom-prefix}-color-error', @error-color);
+@color-background-error: var(~'@{global-custom-prefix}-color-background-error', @error-bg-color);
+@color-border-error: var(~'@{global-custom-prefix}-color-border-error', @error-border-color);
+
+// ongoing
+@color-ongoing: var(~'@{global-custom-prefix}-color-ongoing', @ongoing-color);
+@color-background-ongoing: var(~'@{global-custom-prefix}-color-background-ongoing', @ongoing-bg-color);
+@color-border-ongoing: var(~'@{global-custom-prefix}-color-border-ongoing', @ongoing-border-color);
+
+// disabled
+@color-disabled: var(~'@{global-custom-prefix}-color-disabled', @disabled-color);
+@color-border-disabled: var(~'@{global-custom-prefix}-color-border-disabled', @disabled-border-color);
+
+
+@color-end: var(~'@{global-custom-prefix}-color-end', @end-color);
+
+// color text-link
+@color-text-link: var(~'@{global-custom-prefix}-color-text-link', @link-color);
+@color-text-link-hover: var(~'@{global-custom-prefix}-color-text-link-hover', @link-color-hover);
+@color-text-link-active: var(~'@{global-custom-prefix}-color-text-link-active', @link-color-active);
+
+// color-text
+@color-text-primary: var(~'@{global-custom-prefix}-color-text-primary', @primary-text-color);
+@color-text-primary-2: var(~'@{global-custom-prefix}-color-text-primary-2', @primary-text-color2);
+
+
+@color-text-secondary: var(~'@{global-custom-prefix}-color-text-secondary', @secondary-text-color);
+@color-text-secondary-2: var(~'@{global-custom-prefix}-color-text-secondary-2', @secondary-text-color2);
+@color-text-secondary-3: var(~'@{global-custom-prefix}-color-text-secondary-3', @secondary-text-color3);
+
+@color-text-third: var(~'@{global-custom-prefix}-color-text-third', @third-text-color);
+@color-text-third-2: var(~'@{global-custom-prefix}-color-text-third-2', @third-text-color2);
+
+// placeholder 占位符文本
+@color-text-placeholder: var(~'@{global-custom-prefix}-color-text-placeholder', @placeholder-text-color);
+@color-text-placeholder-2: var(~'@{global-custom-prefix}-color-text-placeholder-2', @placeholder-text-color2);
+
+ //bg -----------------
+@color-background: var(~'@{global-custom-prefix}-color-background', @bg);
+@color-background-2: var(~'@{global-custom-prefix}-color-background-2', @bg2);
+@color-background-3: var(~'@{global-custom-prefix}-color-background-3', @bg3);
+
+
+@color-background-contain: var(~'@{global-custom-prefix}-color-background-contain', @contain-bg); // 容器内的灰背景
+@color-input: var(~'@{global-custom-prefix}-color-input', @input-color); // 线型录入的默认态
+
+
+@color-border-strong: var(~'@{global-custom-prefix}-color-border-strong', @strong-border-color);
+@color-border-strong-2: var(~'@{global-custom-prefix}-color-border-strong-2', @strong-border-color-1);
+@color-border-strong-3: var(~'@{global-custom-prefix}-color-border-strong-3', @strong-border-color-2);
+@color-border-weak: var(~'@{global-custom-prefix}-color-border-weak', @weak-border-color);
+
+@color-white: var(~'@{global-custom-prefix}-color-white', @white);
+
+// logo 颜色值
+@color-logo-1: var(~'@{global-custom-prefix}-color-logo-1', @logo-color-1);
+@color-logo-2: var(~'@{global-custom-prefix}-color-logo-2', @logo-color-2);
+@color-logo-3: var(~'@{global-custom-prefix}-color-logo-3', @logo-color-3);
+@color-logo-4: var(~'@{global-custom-prefix}-color-logo-4', @logo-color-4);
+/* -----------  motion  ——————---- start */
+@motion-ease-out: var(~'@{global-custom-prefix}-ease-out', @ease-out);
+@motion-ease-in: var(~'@{global-custom-prefix}-ease-in', @ease-in);
+@motion-ease: var(~'@{global-custom-prefix}-ease', @ease);
+/* -----------  motion  ——————---- end */
+
+/* -----------  transition  ——————---- start */
+@duration-slowly: var(~'@{global-custom-prefix}-duration-slowly', @transition-duration-slowly);
+@duration-promptly: var(~'@{global-custom-prefix}-duration', @transition-duration);
+@duration-quickly: var(~'@{global-custom-prefix}-duration-quickly', @transition-duration-quickly);
+/* -----------  transition  ——————---- end */
+
+// font
+// font-size 与 font-weight 变量名重复 去除了@font-size定义 font-weight变为font-weight-light
+@font-weight-light: var(~'@{global-custom-prefix}-font-weight', @font-weight);
+@font-size-small: var(~'@{global-custom-prefix}-font-size-small', @small-font-size);
+@font-size-middle: var(~'@{global-custom-prefix}-font-size-middle', @middle-font-size);
+@font-size-large: var(~'@{global-custom-prefix}-font-size-large', @large-font-size);
+@font-size-x-large: var(~'@{global-custom-prefix}-font-size-x-large', @xlarge-font-size);
+@font-size-xx-large: var(~'@{global-custom-prefix}-font-size-xx-large', @xxlarge-font-size);
+
+@radius-border: var(~'@{global-custom-prefix}-radius-border', @radius-size); // 圆角值
+
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+@z-index-below: var(~'@{global-custom-prefix}-z-index-below', @zIndex-below); // 置于下层
+@z-index-popper: var(~'@{global-custom-prefix}-z-index-popper', @zIndex-popper); // 弹出层
+@z-index-dialog: var(~'@{global-custom-prefix}-z-index-dialog', @zIndex-dialog); // 对话框
+@z-index-masker: var(~'@{global-custom-prefix}-z-index-masker', @zIndex-masker); // 遮罩层 （loading等）
+@z-index-apex: var(~'@{global-custom-prefix}-z-index-apex', @zIndex-apex); // 顶层 （notify）
+/* -----------  zIndex  ——————---- end */

package/lib/switch/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-switch {
   padding: 0;
   position: relative;
   display: inline-block;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  background-color: #999;
+  background-color: var(--kd-c-switch-color-off, #999);
   cursor: pointer;
   -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -114,9 +123,9 @@
   transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-switch .kd-switch-inner {
-  color: #fff;
-  font-size: 12px;
-  margin: 0 5px 0 17px;
+  color: var(--kd-c-switch-color-font, var(--kd-g-color-white, #fff));
+  font-size: var(--kd-c-switch-inner-font-size-small, var(--kd-g-font-size-small, 12px));
+  margin: var(--kd-c-switch-inner-spacing-margin, 0 5px 0 17px);
   -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   -webkit-user-select: none;
@@ -141,16 +150,16 @@
           animation: loadingcircle 1s infinite;
   -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
           animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
-  font-size: 12px;
+  font-size: var(--kd-c-switch-small-font-size, var(--kd-g-font-size-small, 12px));
   line-height: 1;
   vertical-align: baseline;
 }
 .kd-switch-disabled {
-  background-color: #b2b2b2;
+  background-color: var(--kd-c-switch-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-switch-checked {
-  background-color: #5582f3;
+  background-color: var(--kd-c-switch-color-on, var(--kd-g-color-theme, #5582f3));
   text-align: right;
 }
 .kd-switch-checked::after {
@@ -162,47 +171,47 @@
 .kd-switch-checked .kd-switch-loading-icon {
   left: unset;
   right: 1px;
-  color: #276ff5;
+  color: var(--kd-c-switch-color-loading, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-switch-checked.kd-switch-disabled {
   opacity: 0.5;
 }
 .kd-switch-checked .kd-switch-inner {
-  margin: 0 17px 0 5px;
+  margin: var(--kd-c-switch-inner-spacing-margin-checked, 0 17px 0 5px);
 }
 .kd-switch-checked.kd-switch-size-large .kd-switch-inner {
-  margin: 0 21px 0 5px;
+  margin: var(--kd-c-switch-inner-spacing-margin-large-checked, 0 21px 0 5px);
 }
 .kd-switch-size-small {
-  height: 14px;
-  min-width: 28px;
-  line-height: 14px;
-  font-size: 12px;
-  border-radius: 7px;
+  height: var(--kd-c-switch-small-sizing-height, 14px);
+  min-width: var(--kd-c-switch-small-sizing-width, 28px);
+  line-height: var(--kd-c-switch-small-line-height, 14px);
+  font-size: var(--kd-c-switch-small-font-size, var(--kd-g-font-size-small, 12px));
+  border-radius: var(--kd-c-switch-small-radius-border, 7px);
 }
 .kd-switch-size-small::after {
-  width: 12px;
-  height: 12px;
+  width: calc(var(--kd-c-switch-small-sizing-height, 14px) - 2px);
+  height: calc(var(--kd-c-switch-small-sizing-height, 14px) - 2px);
 }
 .kd-switch-size-small .kd-switch-loading-icon {
-  width: 12px;
-  height: 12px;
+  width: calc(var(--kd-c-switch-small-sizing-height, 14px) - 2px);
+  height: calc(var(--kd-c-switch-small-sizing-height, 14px) - 2px);
 }
 .kd-switch-size-large {
-  height: 20px;
-  min-width: 40px;
-  line-height: 20px;
-  font-size: 12px;
-  border-radius: 10px;
+  height: var(--kd-c-switch-large-sizing-height, 20px);
+  min-width: var(--kd-c-switch-large-sizing-width, 40px);
+  line-height: var(--kd-c-switch-large-line-height, 20px);
+  font-size: var(--kd-c-switch-large-font-size, var(--kd-g-font-size-small, 12px));
+  border-radius: var(--kd-c-switch-large-sizing-border-radius, 10px);
 }
 .kd-switch-size-large::after {
-  width: 18px;
-  height: 18px;
+  width: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
+  height: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
 }
 .kd-switch-size-large .kd-switch-loading-icon {
-  width: 18px;
-  height: 18px;
+  width: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
+  height: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
 }
 .kd-switch-size-large .kd-switch-inner {
-  margin: 0 5px 0 21px;
+  margin: var(--kd-c-switch-inner-spacing-margin-large, 0 5px 0 21px);
 }

package/lib/switch/style/index.less

@@ -6,12 +6,14 @@
 
 .@{switch-prefix-cls} {
   .switch;
+
   .@{switch-prefix-cls}-inner {
     .switch-inner;
-	  user-select: none;
+    user-select: none;
   }
+
   .@{switch-prefix-cls}-loading-icon {
-    color:  @disabled-color;
+    color: @disabled-color;
     position: absolute;
     box-sizing: border-box;
     display: inline-block;
@@ -19,7 +21,8 @@
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
-    .kdicon-loadding-circle{
+
+    .kdicon-loadding-circle {
       animation: loadingcircle 1s infinite;
       animation-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);
       font-size: @switch-small-font-size;
@@ -27,44 +30,52 @@
       vertical-align: baseline;
     }
   }
+
   &-disabled {
     background-color: @switch-disabled-bg;
     cursor: not-allowed;
   }
+
   &-checked {
     background-color: @switch-on-color;
     text-align: right;
+
     &::after {
       left: 100%;
       margin-left: -1px;
       transform: translateX(-100%);
     }
+
     .@{switch-prefix-cls}-loading-icon {
       left: unset;
       right: 1px;
       color: @switch-loading-color;
     }
+
     &.@{switch-prefix-cls}-disabled {
       opacity: 0.5;
     }
+
     .@{switch-prefix-cls}-inner {
       margin: @switch-inner-checked-margin;
     }
+
     &.@{switch-prefix-cls}-size-large {
       .@{switch-prefix-cls}-inner {
         margin: @switch-inner-large-checked-margin;
       }
     }
   }
+
   &-size-small {
-		.switch-size(@switch-small-height, @switch-small-line-height, @switch-small-font-size, @switch-small-min-width, @switch-small-border-radius);
+    .switch-size(@switch-small-height, @switch-small-line-height, @switch-small-font-size, @switch-small-min-width, @switch-small-border-radius);
   }
+
   &-size-large {
     .switch-size(@switch-large-height, @switch-large-line-height, @switch-large-font-size, @switch-large-min-width, @switch-large-border-radius);
+
     .@{switch-prefix-cls}-inner {
       margin: @switch-inner-large-margin;
     }
   }
 }
-
-

package/lib/switch/style/mixin.less

@@ -1,3 +1,4 @@
+@import './token.less';
 .switch() {
   padding: 0;
   position: relative;
@@ -29,11 +30,11 @@
 	font-size: @font-size;
   border-radius: @border-radius;
   &::after {
-    width: @height - 2px;
-    height: @height - 2px;
+    width: calc( @height - 2px);
+    height:calc( @height - 2px);
   }
   .@{switch-prefix-cls}-loading-icon {
-    width: @height - 2px;
-    height: @height - 2px;
+    width: calc( @height - 2px);
+    height: calc( @height - 2px);
   }
-}
+}

package/lib/switch/style/token.less

@@ -0,0 +1,45 @@
+@import '../../style/themes/token.less';
+
+@switch-prefix: '--@{kd-prefix}-c-switch';
+
+
+
+
+
+
+
+
+// color
+@switch-on-color: var(~'@{switch-prefix}-color-on', @color-theme);
+@switch-off-color: var(~'@{switch-prefix}-color-off', #999);
+@switch-disabled-bg: var(~'@{switch-prefix}-color-background-disabled', @color-disabled);
+@switch-loading-color: var(~'@{switch-prefix}-color-loading', @color-ongoing);
+@switch-font-color: var(~'@{switch-prefix}-color-font', @color-white);
+
+// font
+@switch-small-font-size: var(~'@{switch-prefix}-small-font-size', @font-size-small);
+@switch-large-font-size: var(~'@{switch-prefix}-large-font-size', @font-size-small);
+@switch-inner-small-font-size: var(~'@{switch-prefix}-inner-font-size-small', @font-size-small);
+
+
+// line-height
+@switch-large-line-height: var(~'@{switch-prefix}-large-line-height', 20px);
+@switch-small-line-height: var(~'@{switch-prefix}-small-line-height', 14px);
+
+
+//radius
+@switch-small-border-radius: var(~'@{switch-prefix}-small-radius-border', 7px);
+
+
+// sizing
+@switch-small-height: var(~'@{switch-prefix}-small-sizing-height', 14px);
+@switch-small-min-width: var(~'@{switch-prefix}-small-sizing-width', 28px);
+@switch-large-height: var(~'@{switch-prefix}-large-sizing-height', 20px);
+@switch-large-min-width: var(~'@{switch-prefix}-large-sizing-width', 40px);
+@switch-large-border-radius: var(~'@{switch-prefix}-large-sizing-border-radius', 10px);
+
+// spacing
+@switch-inner-margin: var(~'@{switch-prefix}-inner-spacing-margin', 0 5px 0 17px);
+@switch-inner-checked-margin: var(~'@{switch-prefix}-inner-spacing-margin-checked', 0 17px 0 5px);
+@switch-inner-large-margin: var(~'@{switch-prefix}-inner-spacing-margin-large', 0 5px 0 21px);
+@switch-inner-large-checked-margin: var(~'@{switch-prefix}-inner-spacing-margin-large-checked', 0 21px 0 5px);