feat(web): modify component border radius (#666)

* feat: add 999px border-radius token * feat: replace border-radius px to variable * style: replace calender/comment.. border-dadius * style: popup/menu/transfer... border-radius replace * style: range-input/radio-group border-radius * style: replace badge/buttom(round)... border-radius * style: add cascader menu border-radius * style: 设计走查修改 * style: 修复设计走查问题 * fix: fix cacascader横线问题 * fix: fix lint error * style: rename @border-radius-50
Tencent · Jul 27, 2022 · 71fd1eb · 71fd1eb
1 parent 913720c
commit 71fd1eb
Show file tree

Hide file tree

Showing 53 changed files with 80 additions and 72 deletions.
diff --git a/style/web/_global.less b/style/web/_global.less
@@ -18,7 +18,7 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    border-radius: 6px;
+    border-radius: @border-radius-medium;
     border: 2px solid transparent;
     background-clip: content-box;
     background-color: @scrollbar-color;

diff --git a/style/web/_variables.less b/style/web/_variables.less
@@ -229,7 +229,8 @@
 @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); // 圆角-全圆角
+@border-radius-round: var(--td-radius-round); // 圆角-999
+@border-radius-circle: var(--td-radius-circle); // 圆角-全圆角
 
 // 表单相关
 @form-height: 30px;

diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less
@@ -16,7 +16,7 @@
   padding: @alert-padding;
   opacity: 1;
   transition: opacity .2s;
-  border-radius: @border-radius-default;
+  border-radius: @border-radius-medium;
 
   &.@{prefix}-is-hidden { /* 隐藏 */
     display: none;

diff --git a/style/web/components/anchor/_index.less b/style/web/components/anchor/_index.less
@@ -133,7 +133,7 @@
     content: "";
     width: @anchor-target-width;
     height: @anchor-target-width;
-    border-radius: 50%;
+    border-radius: @border-radius-circle;
     background-color: @anchor-text-color-hover;
     vertical-align: middle;
     animation: @anchor-target-animation;

diff --git a/style/web/components/avatar/_var.less b/style/web/components/avatar/_var.less
@@ -18,8 +18,8 @@
 @avatar-icon-large: @icon-l;
 
 //边框
-@avatar-border-radius-circle: @border-radius-50;
-@avatar-border-radius-round: 3px;
+@avatar-border-radius-circle: @border-radius-circle;
+@avatar-border-radius-round: @border-radius-default;
 @avatar-border-color: @bg-color-container;
 
 //组合头像偏移量

diff --git a/style/web/components/badge/_index.less b/style/web/components/badge/_index.less
@@ -40,15 +40,15 @@
     margin-top: 1px;
     width: @badge-dot-size;
     height: @badge-dot-size;
-    border-radius: @border-radius-50;
+    border-radius: @border-radius-circle;
     background-color: @badge-color;
   }
 
   &--circle,
   &--round {
     padding-right: @badge-padding;
     padding-left: @badge-padding;
-    min-width: @badge-height;
+    min-width: @badge-min-width;
     height: @badge-height;
     border-radius: (@badge-height / 2);
     background-color: @badge-color;
@@ -64,6 +64,6 @@
   }
 
   &--round {
-    border-radius: @border-radius-default;
+    border-radius: @border-radius-round;
   }
 }
diff --git a/style/web/components/badge/_var.less b/style/web/components/badge/_var.less
@@ -23,6 +23,7 @@
 // dot 宽/高
 @badge-dot-size: 6px;
 // @badge-status-size: 6px;
+@badge-min-width: 8px;
 
 // 字体
 @badge-font-size: @font-size-s;

diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less
@@ -307,7 +307,7 @@
   }
 
   &--shape-round {
-    border-radius: @btn-shape-border-radius-default;
+    border-radius: @border-radius-round;
 
     &.@{prefix}-size-s {
       border-radius: @btn-shape-border-radius-s;

diff --git a/style/web/components/calendar/_index.less b/style/web/components/calendar/_index.less
@@ -11,7 +11,7 @@
 
   border: 1px solid @calendar-border-color;
   background-color: @calendar-bg;
-
+  border-radius: @border-radius-large;
   .@{prefix}-is-disabled {
 
     &.@{prefix}-calendar__table-body-cell {
@@ -110,7 +110,7 @@
 
   &--card {
     width: @calendar-card-width;
-
+    border-radius: @border-radius-medium;
     .@{prefix}-calendar__control {
       padding: @calendar-card-calendar-control-padding;
       border-bottom: 1px solid @calendar-border-color;

diff --git a/style/web/components/calendar/_var.less b/style/web/components/calendar/_var.less
@@ -99,9 +99,9 @@
 @calendar-body-row-flex:1;
 
 // 边框弧度
-@calendar-card-body-cell-display-border-radius: @border-radius-50;
+@calendar-card-body-cell-display-border-radius: @border-radius-circle;
 @calendar-scrollbar-thumb-border-radius: @border-radius-default;
-@calendar-card-checked-pointer-border-radius: 6px;
+@calendar-card-checked-pointer-border-radius: @border-radius-medium;
 
 // 动画
 @calendar-transition-duration: @anim-duration-base;

diff --git a/style/web/components/card/_var.less b/style/web/components/card/_var.less
@@ -1,4 +1,4 @@
-@card-border-radius: @border-radius-default;
+@card-border-radius: @border-radius-medium;
 
 // medium
 @card-body-padding: @spacer-2 @spacer-3;

diff --git a/style/web/components/cascader/_index.less b/style/web/components/cascader/_index.less
@@ -20,6 +20,7 @@
 
   &__popup {
     padding: 0;
+    box-shadow: @shadow-2;
   }
 
   &__panel {
@@ -56,6 +57,7 @@
     box-sizing: content-box;
     padding: @cascader-menu-padding;
     background: @bg-color-container;
+    border-radius: @border-radius-medium;
 
     &--segment {
       border-right: .5px solid @cascader-menu-segment-color;

diff --git a/style/web/components/color-picker/_index.less b/style/web/components/color-picker/_index.less
@@ -17,6 +17,7 @@
     @shadow-inset-right,
     @shadow-inset-bottom,
     @shadow-inset-left;
+  border-radius: @border-radius-medium;
   user-select: none;
 }
 
@@ -101,7 +102,7 @@
   border-color: currentcolor;
   width: @color-picker-slider-thumb-size;
   height: @color-picker-slider-thumb-size;
-  border-radius: 50%;
+  border-radius: @border-radius-circle;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 15%);
   background: white;
   color: @text-color-brand;
@@ -113,7 +114,7 @@
     width: 100%;
     height: 100%;
     background: currentcolor;
-    border-radius: 50%;
+    border-radius: @border-radius-circle;
     display: block;
   }
 }
@@ -146,7 +147,7 @@
   .@{prefix}-color-picker__thumb {
     width: @color-picker-saturation-thumb-size;
     height: @color-picker-saturation-thumb-size;
-    border-radius: 50%;
+    border-radius: @border-radius-circle;
     transform: translate(-50%, -50%);
   }
 }
@@ -270,7 +271,7 @@
         display: block;
         width: 100%;
         height: 100%;
-        border-radius: 50%;
+        border-radius: @border-radius-circle;
         overflow: hidden;
         background-size: 4px 4px;
         background-position: 0 0, 2px 2px;
@@ -443,7 +444,7 @@
       display: flex;
       width: @color-picker-swatch-width;
       height: @color-picker-swatch-height;
-      border-radius: 50%;
+      border-radius: @border-radius-circle;
       padding: @color-picker-swatch-padding;
       border: @color-picker-swatch-border-size solid transparent;
       overflow: hidden;
@@ -462,7 +463,7 @@
         position: relative;
         overflow: hidden;
         border: 1px solid @component-border;
-        border-radius: 50%;
+        border-radius: @border-radius-circle;
         flex-shrink: 0;
       }
 
@@ -490,7 +491,7 @@
       position: relative;
       overflow: hidden;
       border: 1px solid @component-border;
-      border-radius: 50%;
+      border-radius: @border-radius-circle;
       box-sizing: border-box;
     }
 

diff --git a/style/web/components/comment/_index.less b/style/web/components/comment/_index.less
@@ -27,7 +27,7 @@
   &__avatar-image {
     width: 56px;
     height: 56px;
-    border-radius: 50%;
+    border-radius: @border-radius-circle;
   }
 
   &__content {
@@ -94,6 +94,7 @@
     margin-top: @comment-reply-margin-top;
     margin-left: @comment-reply-margin-left;
     background-color: @comment-bg-color-secondary;
+    border-radius: @border-radius-medium;
     padding: 16px 24px;
   }
 }
diff --git a/style/web/components/dialog/_index.less b/style/web/components/dialog/_index.less
@@ -17,7 +17,7 @@
   width: @dialog-width;
   background-color: @dialog-bg-color;
   position: relative;
-  border-radius: @dialog-border-radius;
+  border-radius: @border-radius-large;
 
   // icon theme
   .@{prefix}-icon.t-is-info {
@@ -112,7 +112,7 @@
     height: @dialog-close-icon-size;
     align-items: center;
     justify-content: center;
-    border-radius: @dialog-close-border-radius;
+    border-radius: @border-radius-default;
     background: @dialog-bg-color;
     transition: all @anim-duration-base linear;
 

diff --git a/style/web/components/dialog/_var.less b/style/web/components/dialog/_var.less
@@ -55,8 +55,8 @@
 
 // 边框
 @dialog-border: 1px solid @border-level-1-color;
-@dialog-border-radius: @border-radius-default;
-@dialog-close-border-radius: @border-radius-default;
+@dialog-border-radius: @border-radius-medium;
+@dialog-close-border-radius: @border-radius-medium;
 
 // 位置
 @dialog-close-position-top: @spacer-3;

diff --git a/style/web/components/drawer/_index.less b/style/web/components/drawer/_index.less
@@ -167,6 +167,7 @@
     right: @drawer-close-btn-position-right;
     color: @drawer-close-btn-color;
     background-color: @drawer-close-btn-bg-color;
+    border-radius: @border-radius-default;
     cursor: pointer;
     transition: background-color @anim-duration-base;
 

diff --git a/style/web/components/drawer/_var.less b/style/web/components/drawer/_var.less
@@ -68,4 +68,4 @@
 /**
  * 边框弧度
  */
-@drawer-header-border-radius: 2px 2px 0 0;
+@drawer-header-border-radius: @border-radius-small @border-radius-small 0 0;
diff --git a/style/web/components/dropdown/_index.less b/style/web/components/dropdown/_index.less
@@ -13,7 +13,6 @@
 
   background-color: @dropdown-bg-color;
   position: relative;
-  border-radius: @border-radius-default;
   padding: 0;
 
   &__menu {

diff --git a/style/web/components/loading/_index.less b/style/web/components/loading/_index.less
@@ -98,7 +98,7 @@
     width: 100%;
     height: 100%;
     background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
-    border-radius: 50%;
+    border-radius: @border-radius-circle;
     /* stylelint-disable-next-line */
     mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%);
 

diff --git a/style/web/components/menu/_docs.less b/style/web/components/menu/_docs.less
@@ -14,7 +14,7 @@
   width: 140px;
   height: 24px;
   background: #5b6270;
-  border-radius: 3px;
+  border-radius: @border-radius-default;
 }
 
 [class*="@{d-prefix}-demo-menu__sidelogo"] {

diff --git a/style/web/components/menu/_index-v2.less b/style/web/components/menu/_index-v2.less
@@ -776,7 +776,7 @@ a.@{prefix}-menu__item {
     position: absolute;
     background: @menu-theme-light;
     z-index: @menu-outer-zindex;
-    border-radius: @border-radius-default;
+    border-radius: @border-radius-medium;
     opacity: 0;
     .list-style-none();
 

diff --git a/style/web/components/menu/_index.less b/style/web/components/menu/_index.less
@@ -802,7 +802,7 @@ a.@{prefix}-menu__item {
     position: absolute;
     background: @menu-theme-light;
     z-index: @menu-outer-zindex;
-    border-radius: @border-radius-default;
+    border-radius: @border-radius-medium;
     opacity: 0;
     .list-style-none();
 

diff --git a/style/web/components/message/_index.less b/style/web/components/message/_index.less
@@ -59,10 +59,11 @@
       right: @msg-icon-position-right;
       cursor: pointer;
       color: @msg-close-icon-color;
+      border-radius: @border-radius-default;
 
       .@{prefix}-icon-close {
         font-size: @msg-close-font-size;
-        border-radius: @msg-border-radius;
+        border-radius: @border-radius-default;
         transition: all @anim-duration-base linear;
 
         &:hover {

diff --git a/style/web/components/message/_mixin.less b/style/web/components/message/_mixin.less
@@ -1,7 +1,7 @@
 .message() {
   width: fit-content;
   outline: 0;
-  border-radius: @border-radius-default;
+  border-radius: @border-radius-medium;
   background-color: @msg-color-block;
   box-shadow: @msg-shadow;
   box-sizing: border-box;

diff --git a/style/web/components/message/_var.less b/style/web/components/message/_var.less
@@ -33,7 +33,7 @@
 @msg-content-line-height: @text-line-height-base;
 
 // 圆角
-@msg-border-radius: @border-radius-default;
+@msg-border-radius: @border-radius-medium;
 
 // 阴影
 @msg-shadow: @shadow-3-inset;

diff --git a/style/web/components/notification/_index.less b/style/web/components/notification/_index.less
@@ -57,7 +57,7 @@
   .@{prefix}-icon-close {
     cursor: pointer;
     font-size: @notification-icon-close-font-size;
-    border-radius: @notification-close-border-radius;
+    border-radius: @border-radius-default;
     color: @notification-close-icon-color;
 
     &:hover {

diff --git a/style/web/components/notification/_mixin.less b/style/web/components/notification/_mixin.less
@@ -6,7 +6,7 @@
   display: flex;
   box-shadow: @notification-shadow;
   box-sizing: border-box;
-  border-radius: @border-radius-default;
+  border-radius: @border-radius-medium;
   width: @notification-width-default;
   padding: @notification-padding-default;
 }
diff --git a/style/web/components/notification/_var.less b/style/web/components/notification/_var.less
@@ -37,8 +37,8 @@
 @notification-title-line-height: 24px;
 
 // 圆角
-@notification-detail-item-border-radius: @border-radius-default;
-@notification-close-border-radius: @border-radius-default;
+@notification-detail-item-border-radius: @border-radius-medium;
+@notification-close-border-radius: @border-radius-medium;
 
 // 阴影
 @notification-shadow: @shadow-2;

diff --git a/style/web/components/popconfirm/_var.less b/style/web/components/popconfirm/_var.less
@@ -55,7 +55,7 @@
 // 尺寸
 @popconfirm-icon-size: @font-size-xl;
 // 圆角
-@popconfirm-border-radius: 6px;
+@popconfirm-border-radius: @border-radius-medium;
 
 // 颜色
 @popconfirm-icon-warning: @warning-color;

diff --git a/style/web/components/popup/_index.less b/style/web/components/popup/_index.less
@@ -21,7 +21,7 @@
     position: relative;
     background: @popup-bg;
     box-shadow: @popup-shadow;
-    border-radius: @border-radius-default;
+    border-radius: @border-radius-medium;
     padding: @popup-padding;
     font-size: @popup-content-font-size;
     line-height: @popup-content-line-height;