feat(web): add border-radius CSS token (#648)

* feat: add border-radius token

* feat: add border-radius variable

* feat: replace @border-radius with @border-radius-default

* fix: fix Variable @border-radius is undefined

* fix: fix spell error

* fix: fix css variables calc error

* chore: fix lint

* refactor: delete unnecessary change

style/web/_variables.less

@@ -224,8 +224,12 @@
 @font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体
 
 // Border Radius
-@border-radius: 3px; // 圆角-全局
-@border-radius-50: 50%; // 圆角-全圆角
+@border-radius-small: var(--td-radius-small); // 圆角-2
+@border-radius-default: var(--td-radius-default); // 圆角-3
+@border-radius-medium: var(--td-radius-medium); // 圆角-6
+@border-radius-large: var(--td-radius-large); // 圆角-9
+@border-radius-extraLarge: var(--td-radius-extraLarge); // 圆角-12
+@border-radius-50: var(--td-radius-round); // 圆角-全圆角
 
 // 表单相关
 @form-height: 30px;

style/web/components/alert/_index.less

@@ -16,7 +16,7 @@
   padding: @alert-padding;
   opacity: 1;
   transition: opacity .2s;
-  border-radius: @border-radius;
+  border-radius: @border-radius-default;
 
   &.@{prefix}-is-hidden { /* 隐藏 */
     display: none;

style/web/components/badge/_index.less

@@ -64,6 +64,6 @@
   }
 
   &--round {
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
   }
 }

style/web/components/breadcrumb/_index.less

@@ -154,7 +154,7 @@
     padding: @spacer;
     color: @breadcrumb-text-color-current;
     background: @bg-color-container;
-    border-radius: @border-radius * .5;
+    border-radius: calc(@border-radius-default * .5);
     box-shadow: @breadcrumb-option-box-shadow;
     z-index: 20;
 

style/web/components/button/_var.less

@@ -4,7 +4,7 @@
 @btn-height-l: 40px;
 
 // 圆角
-@btn-border-radius: @border-radius;
+@btn-border-radius: @border-radius-default;
 @btn-shape-border-radius-s: (@btn-height-s / 2);
 @btn-shape-border-radius-default: (@btn-height-default / 2);
 @btn-shape-border-radius-l: (@btn-height-l / 2);

style/web/components/calendar/_var.less

@@ -100,7 +100,7 @@
 
 // 边框弧度
 @calendar-card-body-cell-display-border-radius: @border-radius-50;
-@calendar-scrollbar-thumb-border-radius: @border-radius;
+@calendar-scrollbar-thumb-border-radius: @border-radius-default;
 @calendar-card-checked-pointer-border-radius: 6px;
 
 // 动画

style/web/components/card/_index.less

@@ -36,7 +36,7 @@
   display: flow-root;
   width: 100%;
   max-height: 100%;
-  border-radius: @border-radius @border-radius 0 0;
+  border-radius: @border-radius-default @border-radius-default 0 0;
 }
 
 .@{prefix}-card__body {

style/web/components/card/_var.less

@@ -1,4 +1,4 @@
-@card-border-radius: @border-radius;
+@card-border-radius: @border-radius-default;
 
 // medium
 @card-body-padding: @spacer-2 @spacer-3;

style/web/components/cascader/_var.less

@@ -30,7 +30,7 @@
 @cascader-item-height-default: 40px;
 @cascader-item-height-l: 40px;
 @cascader-item-margin-top: 4px;
-@cascader-item-border-radius: @border-radius;
+@cascader-item-border-radius: @border-radius-default;
 @cascader-item-padding-with-icon: 0 22px 0 8px;
 @cascader-item-padding: 0 8px;
 @cascader-item-padding-l: 0 12px;

style/web/components/checkbox/_var.less

@@ -34,7 +34,7 @@
 
 // 尺寸
 @checkbox-size: 16px;
-@checkbox-border-radius: @border-radius;
+@checkbox-border-radius: @border-radius-default;
 @checkbox-margin-right: @spacer;
 
 @checkbox-check-width: 5px;

style/web/components/color-picker/_var.less

@@ -29,7 +29,7 @@
 @color-picker-degree-width: 42px;
 @color-picker-gradient-preview-width: 42px;
 @color-picker-gradient-preview-height: 32px;
-@color-picker-gradient-preview-radius: @border-radius;
+@color-picker-gradient-preview-radius: @border-radius-default;
 @color-picker-swatch-width: 23px;
 @color-picker-swatch-height: 23px;
 @color-picker-swatch-radius: 50%;

style/web/components/date-picker/_index.less

@@ -323,16 +323,16 @@
     &-start {
       &::before {
         left: 6px;
-        border-top-left-radius: @border-radius;
-        border-bottom-left-radius: @border-radius;
+        border-top-left-radius: @border-radius-default;
+        border-bottom-left-radius: @border-radius-default;
       }
     }
 
     &-end {
       &::before {
         right: 6px;
-        border-top-right-radius: @border-radius;
-        border-bottom-right-radius: @border-radius;
+        border-top-right-radius: @border-radius-default;
+        border-bottom-right-radius: @border-radius-default;
       }
     }
   }

style/web/components/date-picker/_var.less

@@ -29,7 +29,7 @@
 
 @datepicker-th-font-weight: 400;
 @datepicker-font-weight-medium: 500;
-@datepicker-panel-border-radius: @border-radius;
+@datepicker-panel-border-radius: @border-radius-default;
 
 @datepicker-presets-padding: @spacer-l;
 @datepicker-presets-gap: @spacer;

style/web/components/dialog/_var.less

@@ -55,8 +55,8 @@
 
 // 边框
 @dialog-border: 1px solid @border-level-1-color;
-@dialog-border-radius: @border-radius;
-@dialog-close-border-radius: @border-radius;
+@dialog-border-radius: @border-radius-default;
+@dialog-close-border-radius: @border-radius-default;
 
 // 位置
 @dialog-close-position-top: @spacer-3;

style/web/components/dropdown/_index.less

@@ -13,7 +13,7 @@
 
   background-color: @dropdown-bg-color;
   position: relative;
-  border-radius: @border-radius;
+  border-radius: @border-radius-default;
   padding: 0;
 
   &__menu {
@@ -41,7 +41,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
     color: @dropdown-text-color;
     padding: @dropdown-item-padding;
     margin: @dropdown-item-margin;

style/web/components/input-number/_index.less

@@ -63,7 +63,7 @@
     top: 0;
     border: 1px solid @input-number-button-border-color;
     box-sizing: border-box;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
     background-color: @input-number-button-bg-color;
     display: flex;
     justify-content: center;
@@ -202,7 +202,7 @@
 
 .@{inputNumberCls}.@{inputNumberCls}--normal {
   padding: 0;
-  border-radius: @border-radius;
+  border-radius: @border-radius-default;
 
   &.@{prefix}-is-disabled {
     cursor: no-drop;
@@ -243,7 +243,7 @@
     padding-right: (
       @input-number-right-button-width + @input-number-padding-horizontal-default
     );
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
   }
 
   .@{inputNumberCls}__decrease,
@@ -297,12 +297,12 @@
 
   .@{inputNumberCls}__increase {
     top: 1px;
-    border-top-right-radius: calc(@border-radius - 1px);
+    border-top-right-radius: calc(@border-radius-default - 1px);
   }
 
   .@{inputNumberCls}__decrease {
     top: @input-number-button-column-height + 3px;
-    border-bottom-right-radius: calc(@border-radius - 1px);
+    border-bottom-right-radius: calc(@border-radius-default - 1px);
   }
 
   &.@{prefix}-size-l {

style/web/components/input/_index.less

@@ -156,7 +156,7 @@
     }
 
     &:last-child {
-      border-radius: 0 @border-radius @border-radius 0;
+      border-radius: 0 @border-radius-default @border-radius-default 0;
     }
   }
 

style/web/components/input/_var.less

@@ -73,7 +73,7 @@
 @input-tips-font-size: @font-size-s;
 
 // 边框
-@input-border-radius: @border-radius;
+@input-border-radius: @border-radius-default;
 
 // box
 @input-box-shadow-color-default-focus: @brand-color-focus;

style/web/components/menu/_index-v2.less

@@ -487,7 +487,7 @@ a.@{prefix}-menu__item {
     line-height: @default-menu-item-height;
     border-bottom: 0;
     text-align: left;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
     transition:
       background-color @anim-duration-slow @anim-time-fn-easing,
       padding @anim-duration-slow @anim-time-fn-easing;
@@ -613,7 +613,7 @@ a.@{prefix}-menu__item {
     cursor: pointer;
     // overflow: hidden;
     text-overflow: ellipsis;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
 
     ::selection {
       background: transparent;
@@ -776,7 +776,7 @@ a.@{prefix}-menu__item {
     position: absolute;
     background: @menu-theme-light;
     z-index: @menu-outer-zindex;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
     opacity: 0;
     .list-style-none();
 
@@ -863,7 +863,7 @@ a.@{prefix}-menu__item {
 
       .@{prefix}-menu__item {
         color: @menu-item-color--dark;
-        border-radius: @border-radius;
+        border-radius: @border-radius-default;
 
         --ripple-color: @menu-item-animation-bg--dark;
 
@@ -888,7 +888,7 @@ a.@{prefix}-menu__item {
   &__operations {
     &-icon {
       margin-right: 16px;
-      border-radius: @border-radius;
+      border-radius: @border-radius-default;
       color: @menu-item-color--light;
       transition: background-color @anim-duration-moderate @anim-time-fn-easing;
 

style/web/components/menu/_index.less

@@ -490,7 +490,7 @@ a.@{prefix}-menu__item {
     line-height: @default-menu-item-height;
     border-bottom: 0;
     text-align: left;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
     transition:
       background-color @anim-duration-slow @anim-time-fn-easing,
       padding @anim-duration-slow @anim-time-fn-easing;
@@ -616,7 +616,7 @@ a.@{prefix}-menu__item {
     cursor: pointer;
     // overflow: hidden;
     text-overflow: ellipsis;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
 
     ::selection {
       background: transparent;
@@ -733,7 +733,7 @@ a.@{prefix}-menu__item {
 
       .@{prefix}-menu__item {
         color: @menu-item-color--dark;
-        border-radius: @border-radius;
+        border-radius: @border-radius-default;
 
         &.@{prefix}-is-active {
           color: @menu-item-active-color--dark;
@@ -802,7 +802,7 @@ a.@{prefix}-menu__item {
     position: absolute;
     background: @menu-theme-light;
     z-index: @menu-outer-zindex;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
     opacity: 0;
     .list-style-none();
 
@@ -888,7 +888,7 @@ a.@{prefix}-menu__item {
   &__operations {
     &-icon {
       margin-right: 16px;
-      border-radius: @border-radius;
+      border-radius: @border-radius-default;
       color: @menu-item-color--light;
       transition: background-color @anim-duration-moderate @anim-time-fn-easing;
 

style/web/components/message/_mixin.less

@@ -1,7 +1,7 @@
 .message() {
   width: fit-content;
   outline: 0;
-  border-radius: @border-radius;
+  border-radius: @border-radius-default;
   background-color: @msg-color-block;
   box-shadow: @msg-shadow;
   box-sizing: border-box;

style/web/components/message/_var.less

@@ -33,7 +33,7 @@
 @msg-content-line-height: @text-line-height-base;
 
 // 圆角
-@msg-border-radius: @border-radius;
+@msg-border-radius: @border-radius-default;
 
 // 阴影
 @msg-shadow: @shadow-3-inset;

style/web/components/notification/_mixin.less

@@ -6,7 +6,7 @@
   display: flex;
   box-shadow: @notification-shadow;
   box-sizing: border-box;
-  border-radius: @border-radius;
+  border-radius: @border-radius-default;
   width: @notification-width-default;
   padding: @notification-padding-default;
 }

style/web/components/notification/_var.less

@@ -37,8 +37,8 @@
 @notification-title-line-height: 24px;
 
 // 圆角
-@notification-detail-item-border-radius: @border-radius;
-@notification-close-border-radius: @border-radius;
+@notification-detail-item-border-radius: @border-radius-default;
+@notification-close-border-radius: @border-radius-default;
 
 // 阴影
 @notification-shadow: @shadow-2;

style/web/components/pagination/_var.less

@@ -14,7 +14,7 @@
 
 @pagination-icon-color-disabled: @text-color-disabled;
 @pagination-border-color: @component-border;
-@pagination-border-radius-base: @border-radius;
+@pagination-border-radius-base: @border-radius-default;
 
 // 尺寸
 @pagination-height-s: (@spacer * 3);

style/web/components/popup/_index.less

@@ -21,7 +21,7 @@
     position: relative;
     background: @popup-bg;
     box-shadow: @popup-shadow;
-    border-radius: @border-radius;
+    border-radius: @border-radius-default;
     padding: @popup-padding;
     font-size: @popup-content-font-size;
     line-height: @popup-content-line-height;

style/web/components/radio/_var.less

@@ -51,7 +51,7 @@
 @radio-size: 16px;
 @radio-dot-size: (@radio-size / 2);
 @radio-margin-right: (@spacer * 3);
-@radio-button-border-radius: @border-radius;
+@radio-button-border-radius: @border-radius-default;
 @radio-height-small: @spacer-3 - 4px;
 @radio-height-medium: @spacer-4 - 4px;
 @radio-height-large: @spacer-5 - 4px;

style/web/components/range-input/_var.less

@@ -50,7 +50,7 @@
 @range-input-extra-font-size: @font-size-s;
 
 // 边框
-@range-input-border-radius: @border-radius;
+@range-input-border-radius: @border-radius-default;
 
 // box
 @range-input-box-shadow-color-default-focus: @brand-color-focus;

style/web/components/select-input/_var.less

@@ -1,2 +1,2 @@
 @select-input-focus-bg: @bg-color-container-hover;
-@select-input-border-radius: @border-radius;
+@select-input-border-radius: @border-radius-default;

style/web/components/select/_var.less

@@ -45,8 +45,8 @@
 @select-input-shadow: 0 0 0 2px @brand-color-focus;
 
 //radius
-@select-border-radius: @border-radius;
-@select-option-border-radius: @border-radius;
+@select-border-radius: @border-radius-default;
+@select-option-border-radius: @border-radius-default;
 
 //透明度