fix(Checkbox): fix border width error (Tencent#3069)

* fix(Checkbox): fix border width error

* docs(Checkbox): update css vars

Author: anlyyao

src/checkbox/README.en-US.md

@@ -50,23 +50,24 @@ change | `(value: CheckboxGroupValue, context: { value: boolean|number|string, l
 
 
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
 --td-checkbox-bg-color | @bg-color-container | - 
 --td-checkbox-border-color | @component-stroke | - 
---td-checkbox-description-color | @font-gray-2 | - 
---td-checkbox-description-disabled-color | @font-gray-4 | - 
+--td-checkbox-description-color | @text-color-secondary | - 
+--td-checkbox-description-disabled-color | @text-color-disabled | - 
 --td-checkbox-description-line-height | 44rpx | - 
 --td-checkbox-font-size | 32rpx | - 
 --td-checkbox-icon-checked-color | @brand-color | - 
---td-checkbox-icon-color | @gray-color-4 | - 
+--td-checkbox-icon-color | @component-border | - 
 --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - 
 --td-checkbox-icon-disabled-color | @brand-color-disabled | - 
 --td-checkbox-icon-size | 48rpx | - 
 --td-checkbox-tag-active-bg-color | @brand-color-light | - 
 --td-checkbox-tag-active-color | @brand-color | - 
---td-checkbox-title-color | @font-gray-1 | - 
---td-checkbox-title-disabled-color | @font-gray-4 | - 
+--td-checkbox-title-color | @text-color-primary | - 
+--td-checkbox-title-disabled-color | @text-color-disabled | - 
 --td-checkbox-title-line-height | 48rpx | - 
 --td-checkbox-vertical-padding | 32rpx | - 

src/checkbox/README.md

@@ -122,24 +122,25 @@ default-value | Array | undefined | 选中值。非受控属性。TS 类型：`T
 change | `(value: CheckboxGroupValue, context: { value: boolean|number|string, label: boolean|number|string })` | 值变化时触发。`context` 表示当前点击项内容。
 
 
-### CSS 变量
+### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-checkbox-bg-color | @bg-color-container | - 
 --td-checkbox-border-color | @component-stroke | - 
---td-checkbox-description-color | @font-gray-2 | - 
---td-checkbox-description-disabled-color | @font-gray-4 | - 
+--td-checkbox-description-color | @text-color-secondary | - 
+--td-checkbox-description-disabled-color | @text-color-disabled | - 
 --td-checkbox-description-line-height | 44rpx | - 
 --td-checkbox-font-size | 32rpx | - 
 --td-checkbox-icon-checked-color | @brand-color | - 
---td-checkbox-icon-color | @gray-color-4 | - 
+--td-checkbox-icon-color | @component-border | - 
 --td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - 
 --td-checkbox-icon-disabled-color | @brand-color-disabled | - 
 --td-checkbox-icon-size | 48rpx | - 
 --td-checkbox-tag-active-bg-color | @brand-color-light | - 
 --td-checkbox-tag-active-color | @brand-color | - 
---td-checkbox-title-color | @font-gray-1 | - 
---td-checkbox-title-disabled-color | @font-gray-4 | - 
+--td-checkbox-title-color | @text-color-primary | - 
+--td-checkbox-title-disabled-color | @text-color-disabled | - 
 --td-checkbox-title-line-height | 48rpx | - 
 --td-checkbox-vertical-padding | 32rpx | - 

src/checkbox/checkbox.less

@@ -2,7 +2,7 @@
 
 @checkbox: ~'@{prefix}-checkbox';
 
-@checkbox-border-width: 6rpx;
+@checkbox-border-width: 4rpx;
 @checkbox-icon-size: var(--td-checkbox-icon-size, 48rpx);
 @checkbox-font-size: var(--td-checkbox-font-size, 32rpx);
 @checkbox-title-line-height: var(--td-checkbox-title-line-height, 48rpx);
@@ -14,7 +14,7 @@
 @checkbox-title-disabled-color: var(--td-checkbox-title-disabled-color, @text-color-disabled);
 @checkbox-description-color: var(--td-checkbox-description-color, @text-color-secondary);
 @checkbox-description-disabled-color: var(--td-checkbox-description-disabled-color, @text-color-disabled);
-@checkbox-icon-color: var(--td-checkbox-icon-color, @text-color-disabled);
+@checkbox-icon-color: var(--td-checkbox-icon-color, @component-border);
 @checkbox-icon-disabled-color: var(--td-checkbox-icon-disabled-color, @brand-color-disabled);
 @checkbox-icon-disabled-bg-color: var(--td-checkbox-icon-disabled-bg-color, @bg-color-component-disabled);
 @checkbox-icon-checked-color: var(--td-checkbox-icon-checked-color, @brand-color);
@@ -99,7 +99,7 @@
     &-circle {
       width: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
       height: calc((@checkbox-icon-size - @checkbox-border-width) * 2);
-      border: @checkbox-border-width solid @checkbox-icon-color;
+      border: calc(@checkbox-border-width * 2) solid @checkbox-icon-color;
       border-radius: 50%;
       position: absolute;
       top: 50%;
@@ -115,8 +115,7 @@
     &-rectangle {
       width: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
       height: calc((@checkbox-icon-size - @checkbox-border-width * 2) * 2);
-      border: @checkbox-border-width solid @checkbox-icon-color;
-      border-radius: 4rpx;
+      border: calc(@checkbox-border-width * 2) solid @checkbox-icon-color;
       position: absolute;
       top: 50%;
       left: 50%;