@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/es/radio/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 */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -106,26 +115,26 @@
           font-feature-settings: 'tnum';
   position: relative;
   display: inline-block;
-  padding-left: 13px;
-  margin-right: 8px;
+  padding-left: var(--kd-c-radio-square-sizing-width-height, 13px);
+  margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
   white-space: nowrap;
   cursor: pointer;
   vertical-align: middle;
-  color: #212121;
-  font-size: 12px;
+  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-radio::before {
   position: absolute;
   top: 50%;
   left: 0;
-  height: 13px;
-  width: 13px;
+  height: var(--kd-c-radio-square-sizing-width-height, 13px);
+  width: var(--kd-c-radio-square-sizing-width-height, 13px);
   content: '';
   border-radius: 50%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border: 1px solid #d9d9d9;
-  background-color: #fff;
+  border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  background-color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s;
@@ -137,11 +146,11 @@
   position: absolute;
   top: 50%;
   left: 2px;
-  width: 9px;
-  height: 9px;
+  width: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
+  height: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
   content: '';
   border-radius: 50%;
-  background-color: #5582f3;
+  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   -webkit-animation: kdRadioLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
@@ -156,27 +165,27 @@
   opacity: 0;
 }
 .kd-radio > span {
-  padding: 0 6px;
+  padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 6px);
 }
 .kd-radio:hover::before {
-  border-color: #5582f3;
+  border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-checked::before {
-  border-color: #5582f3;
+  border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-checked:focus-within::before {
-  -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
-          box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
+  -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
+          box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
 }
 .kd-radio-checked::after {
   position: absolute;
   top: 50%;
   left: 2px;
-  width: 9px;
-  height: 9px;
+  width: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
+  height: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
   content: '';
   border-radius: 50%;
-  background-color: #5582f3;
+  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   -webkit-animation: kdRadioEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
@@ -189,18 +198,18 @@
 .kd-radio-disabled,
 .kd-radio-disabled:hover {
   cursor: not-allowed;
-  color: #b2b2b2;
+  color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-radio-disabled::before,
 .kd-radio-disabled:hover::before {
-  border-color: #b2b2b2;
-  background-color: #f5f5f5;
+  border-color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-radio-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 .kd-radio-disabled::after,
 .kd-radio-disabled:hover::after {
-  background-color: #b2b2b2;
+  background-color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   -webkit-animation: none;
           animation: none;
 }
@@ -215,29 +224,32 @@
           font-feature-settings: 'tnum';
   position: relative;
   display: inline-block;
-  height: 32px;
-  padding: 0 20px;
-  margin-right: 8px;
-  line-height: 30px;
+  height: var(--kd-c-radio-square-sizing-height, 32px);
+  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
+  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
+  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
+  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
+  margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
+  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 0px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
   vertical-align: middle;
-  color: #212121;
-  font-size: 12px;
+  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
   cursor: pointer;
-  background-color: #fff;
+  background-color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
   overflow: hidden;
   border-radius: 2px;
-  border: 1px solid #d9d9d9;
+  border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .kd-radio-square::after {
   position: absolute;
-  right: -11px;
-  bottom: -11px;
-  width: 22px;
-  height: 22px;
+  right: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
+  bottom: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
+  width: calc(var(--kd-c-radio-square-sizing-height, 32px) - 10px);
+  height: calc(var(--kd-c-radio-square-sizing-height, 32px) - 10px);
   content: '';
-  background-color: #5582f3;
+  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
   -webkit-animation: kdRadioSquareLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
@@ -260,24 +272,24 @@
   height: 100%;
 }
 .kd-radio-square:hover {
-  color: #5582f3;
-  border-color: #5582f3;
+  color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-square-checked {
-  border-color: #5582f3;
+  border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-square-checked:focus-within {
-  -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
-          box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
+  -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
+          box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
 }
 .kd-radio-square-checked::after {
   position: absolute;
-  right: -11px;
-  bottom: -11px;
-  width: 22px;
-  height: 22px;
+  right: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
+  bottom: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
+  width: calc(var(--kd-c-radio-square-sizing-height, 32px) - 10px);
+  height: calc(var(--kd-c-radio-square-sizing-height, 32px) - 10px);
   content: '';
-  background-color: #5582f3;
+  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
   -webkit-animation: kdRadioSquareEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
@@ -289,16 +301,16 @@
 }
 .kd-radio-square-disabled,
 .kd-radio-square-disabled:hover {
-  color: #b2b2b2;
-  border-color: #d9d9d9;
-  background-color: #f5f5f5;
+  color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  border-color: var(--kd-c-radio-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  background-color: var(--kd-c-radio-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   -webkit-box-shadow: none;
           box-shadow: none;
   cursor: not-allowed;
 }
 .kd-radio-square-disabled::after,
 .kd-radio-square-disabled:hover::after {
-  background-color: #b2b2b2;
+  background-color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   -webkit-animation: none;
           animation: none;
 }
@@ -313,22 +325,25 @@
           font-feature-settings: 'tnum';
   position: relative;
   display: inline-block;
-  height: 24px;
-  padding: 0 18px;
-  line-height: 24px;
+  height: var(--kd-c-radio-square-sizing-height, 32px);
+  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
+  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
+  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
+  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
+  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 0px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
   vertical-align: middle;
-  color: #212121;
-  font-size: 12px;
+  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
+  font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
   cursor: pointer;
-  background-color: #fff;
-  border: 1px solid #d9d9d9;
+  background-color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
+  border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   border-left: none;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .kd-radio-button:first-child {
   border-radius: 2px 0 0 2px;
-  border-left: 1px solid #d9d9d9;
+  border-left: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-radio-button:first-child::before {
   content: none;
@@ -339,12 +354,12 @@
 .kd-radio-button::before {
   z-index: 10;
   position: absolute;
-  top: -1px;
-  left: -1px;
-  height: 24px;
-  width: 1px;
+  top: calc(-1 * var(--kd-c-radio-radius-border-width, 1px));
+  left: calc(-1 * var(--kd-c-radio-radius-border-width, 1px));
+  height: var(--kd-c-radio-square-sizing-height, 32px);
+  width: var(--kd-c-radio-radius-border-width, 1px);
   content: '';
-  background-color: #d9d9d9;
+  background-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-radio-button-input {
   position: absolute;
@@ -357,26 +372,26 @@
   opacity: 0;
 }
 .kd-radio-button:hover {
-  color: #5582f3;
+  color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-button-checked {
   z-index: 1;
-  color: #fff;
-  border-color: #5582f3;
-  background-color: #5582f3;
+  color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
+  border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-button-checked:focus-within {
-  -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
-          box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
+  -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
+          box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
 }
 .kd-radio-button-checked:hover {
-  color: #fff;
+  color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
 }
 .kd-radio-button-checked::before {
-  background-color: #5582f3;
+  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-button-checked:first-child {
-  border-left-color: #5582f3;
+  border-left-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio-button-checked:first-child::before {
   content: none;
@@ -385,14 +400,14 @@
   content: none;
 }
 .kd-radio-button-checked.kd-radio-button-disabled {
-  background-color: #d9d9d9;
-  border-left-color: #d9d9d9;
+  background-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-left-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 .kd-radio-button-disabled,
 .kd-radio-button-disabled:hover {
-  color: #b2b2b2;
-  border-color: #d9d9d9;
+  color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  border-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   cursor: not-allowed;
 }

package/es/radio/style/index.less

@@ -1,11 +1,10 @@
 @import '../../style/themes/index';
-@import '../../style/mixins/index';
-
+@import 'token.less';
 @radio-prefix-cls: ~'@{kd-prefix}-radio';
 @radio-square-prefix-cls: ~'@{radio-prefix-cls}-square';
 @radio-button-prefix-cls: ~'@{radio-prefix-cls}-button';
 @radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
-@radio-focus-shadow: 0 0 0 3px rgba(@theme-color, 10%);
+@radio-focus-shadow: 0 0 0 3px rgba(@radio-color-theme, 10%);
 
 // 默认类型（单选项）
 .@{radio-prefix-cls} {
@@ -31,8 +30,8 @@
     content: '';
     border-radius: 50%;
     box-sizing: border-box;
-    border: @radio-border-width solid @strong-border-color;
-    background-color: @white;
+    border: @radio-border-width solid @radio-color-border;
+    background-color: @radio-color-background;
     transform: translateY(-50%);
     transition: border-color @transition-duration, box-shadow @transition-duration;
   }
@@ -41,11 +40,11 @@
     position: absolute;
     top: 50%;
     left: 2px;
-    width: @radio-circle-size - 4px;
-    height: @radio-circle-size - 4px;
+    width: calc(@radio-circle-size - 4px);
+    height: calc(@radio-circle-size - 4px);
     content: '';
     border-radius: 50%;
-    background-color: @theme-color;
+    background-color: @radio-color-theme;
     transform: translateY(-50%);
     animation: kdRadioLeaveEffect calc(@transition-duration - 0.1s) @ease both;
     transition: all @transition-duration @ease;
@@ -58,22 +57,23 @@
     opacity: 0;
   }
 
-  & > span {
-    padding: 0 6px;
+  &>span {
+    padding: 0 6px 0 @radio-padding-left;
   }
 
   // 悬停状态
   &:hover {
-    // color: @theme-color;
+
+    // color: @radio-color-theme;
     &::before {
-      border-color: @theme-color;
+      border-color: @radio-color-theme;
     }
   }
 
   // 选中状态
   &-checked {
     &::before {
-      border-color: @theme-color;
+      border-color: @radio-color-theme;
     }
 
     &:focus-within::before {
@@ -84,11 +84,11 @@
       position: absolute;
       top: 50%;
       left: 2px;
-      width: @radio-circle-size - 4px;
-      height: @radio-circle-size - 4px;
+      width: calc(@radio-circle-size - 4px);
+      height: calc(@radio-circle-size - 4px);
       content: '';
       border-radius: 50%;
-      background-color: @theme-color;
+      background-color: @radio-color-theme;
       transform: translateY(-50%);
       animation: kdRadioEffect calc(@transition-duration - 0.1s) @ease both;
       transition: all calc(@transition-duration - 0.1s) @ease;
@@ -101,16 +101,16 @@
   &-disabled,
   &-disabled:hover {
     cursor: not-allowed;
-    color: @disabled-color;
+    color: @radio-color-disabled;
 
     &::before {
-      border-color: @disabled-color;
-      background-color: @disabled-contain-bg;
+      border-color: @radio-color-disabled;
+      background-color: @radio-color-background-disabled;
       box-shadow: none;
     }
 
     &::after {
-      background-color: @disabled-color;
+      background-color: @radio-color-disabled;
       animation: none;
     }
   }
@@ -124,27 +124,31 @@
   position: relative;
   display: inline-block;
   height: @radio-square-height;
-  padding: @radio-square-padding;
+  padding-top: @radio-square-padding-vertical;
+  padding-right: @radio-square-padding-horizontal;
+  padding-bottom: @radio-square-padding-vertical;
+  padding-left: @radio-square-padding-horizontal;
   margin-right: @radio-margin-right;
-  line-height: @radio-square-height - 2;
+  // line-height: calc(@radio-square-height - @radio-border-width * 2);
+  line-height: calc(@radio-square-height - (@radio-square-padding-vertical * 2) - (@radio-border-width * 2));
   vertical-align: middle;
   color: @radio-font-color;
   font-size: @radio-font-size;
   cursor: pointer;
-  background-color: @white;
+  background-color: @radio-color-background;
   overflow: hidden;
   border-radius: @radius-size;
-  border: @radio-border-width solid @strong-border-color;
+  border: @radio-border-width solid @radio-color-border;
   transition: all @transition-duration;
 
   &::after {
     position: absolute;
-    right: -1 * (@radio-square-height - 10px) / 2;
-    bottom: -1 * (@radio-square-height - 10px) / 2;
-    width: @radio-square-height - 10px;
-    height: @radio-square-height - 10px;
+    right: calc(-1 * (@radio-square-height - 10px) / 2);
+    bottom: calc(-1 * (@radio-square-height - 10px) / 2);
+    width: calc(@radio-square-height - 10px);
+    height: calc(@radio-square-height - 10px);
     content: '';
-    background-color: @theme-color;
+    background-color: @radio-color-theme;
     transform: rotate(45deg);
     animation: kdRadioSquareLeaveEffect calc(@transition-duration - 0.1s) @ease both;
     transition: all @transition-duration @ease;
@@ -167,24 +171,26 @@
 
   // 悬停状态
   &:hover {
-    color: @theme-color;
-    border-color: @theme-color;
+    color: @radio-color-theme;
+    border-color: @radio-color-theme;
   }
 
   // 选中状态
   &-checked {
-    border-color: @theme-color;
+    border-color: @radio-color-theme;
+
     &:focus-within {
       box-shadow: @radio-focus-shadow;
     }
+
     &::after {
       position: absolute;
-      right: -1 * (@radio-square-height - 10px) / 2;
-      bottom: -1 * (@radio-square-height - 10px) / 2;
-      width: @radio-square-height - 10px;
-      height: @radio-square-height - 10px;
+      right: calc(-1 * (@radio-square-height - 10px) / 2);
+      bottom: calc(-1 * (@radio-square-height - 10px) / 2);
+      width: calc(@radio-square-height - 10px);
+      height: calc(@radio-square-height - 10px);
       content: '';
-      background-color: @theme-color;
+      background-color: @radio-color-theme;
       transform: rotate(45deg);
       animation: kdRadioSquareEffect calc(@transition-duration - 0.1s) @ease both;
       transition: all calc(@transition-duration - 0.1s) @ease;
@@ -195,14 +201,14 @@
 
   &-disabled,
   &-disabled:hover {
-    color: @disabled-color;
-    border-color: @strong-border-color;
-    background-color: @disabled-contain-bg;
+    color: @radio-color-disabled;
+    border-color: @radio-color-border-disabled;
+    background-color: @radio-color-background-disabled;
     box-shadow: none;
     cursor: not-allowed;
 
     &::after {
-      background-color: @disabled-color;
+      background-color: @radio-color-disabled;
       animation: none;
     }
   }
@@ -215,21 +221,25 @@
   // 默认状态
   position: relative;
   display: inline-block;
-  height: @radio-button-height;
-  padding: @radio-button-padding;
-  line-height: @radio-button-height;
+  height: @radio-square-height;
+  padding-top: @radio-square-padding-vertical;
+  padding-right: @radio-square-padding-horizontal;
+  padding-bottom: @radio-square-padding-vertical;
+  padding-left: @radio-square-padding-horizontal;
+  line-height: calc(@radio-square-height - (@radio-square-padding-vertical * 2) - (@radio-border-width * 2));
   vertical-align: middle;
   color: @radio-font-color;
   font-size: @radio-font-size;
   cursor: pointer;
-  background-color: @white;
-  border: @radio-border-width solid @strong-border-color;
+  background-color: @radio-color-background;
+  border: @radio-border-width solid @radio-color-border;
   border-left: none;
   transition: all @transition-duration;
 
   &:first-child {
     border-radius: @radius-size 0 0 @radius-size;
-    border-left: @radio-border-width solid @strong-border-color;
+    border-left: @radio-border-width solid @radio-color-border;
+
     &::before {
       content: none;
     }
@@ -242,12 +252,12 @@
   &::before {
     z-index: 10;
     position: absolute;
-    top: -1 * @radio-border-width;
-    left: -1 * @radio-border-width;
-    height: @radio-button-height;
+    top: calc(-1 * @radio-border-width);
+    left: calc(-1 * @radio-border-width);
+    height: @radio-square-height;
     width: @radio-border-width;
     content: '';
-    background-color: @strong-border-color;
+    background-color: @radio-color-border;
   }
 
   &-input {
@@ -263,53 +273,55 @@
 
   // 悬停状态
   &:hover {
-    color: @theme-color;
+    color: @radio-color-theme;
+    // border-color: @radio-color-theme;
   }
 
   // 选中状态
   &-checked {
     z-index: 1;
-    color: @white;
-    border-color: @theme-color;
-    background-color: @theme-color;
+    color: @radio-color-background;
+    border-color: @radio-color-theme;
+    background-color: @radio-color-theme;
 
     &:focus-within {
       box-shadow: @radio-focus-shadow;
     }
 
     &:hover {
-      color: @white;
+      color: @radio-color-background;
     }
 
     &::before {
-      background-color: @theme-color;
+      background-color: @radio-color-theme;
     }
 
     &:first-child {
-      border-left-color: @theme-color;
+      border-left-color: @radio-color-theme;
+
       &::before {
         content: none;
       }
     }
 
-    & + .@{radio-button-prefix-cls} {
+    &+.@{radio-button-prefix-cls} {
       &::before {
         content: none;
       }
     }
 
     &.@{radio-button-prefix-cls}-disabled {
-      background-color: @strong-border-color;
-      border-left-color: @strong-border-color;
+      background-color: @radio-color-border;
+      border-left-color: @radio-color-border;
       box-shadow: none;
     }
   }
 
   &-disabled,
   &-disabled:hover {
-    color: @disabled-color;
-    border-color: @strong-border-color;
-    // background-color: @disabled-contain-bg;
+    color: @radio-color-disabled;
+    border-color: @radio-color-border;
+    // background-color: @radio-color-background-disabled;
     cursor: not-allowed;
   }
 }