tdesign-react 0.37.2-alpha.1 → 0.37.2-alpha.2

package/dist/tdesign.css

@@ -8,10 +8,11 @@
 }
 .narrow-scrollbar::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
   background: transparent;
 }
 .narrow-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 6px;
+  border-radius: var(--td-radius-medium);
   border: 2px solid transparent;
   background-clip: content-box;
   background-color: var(--td-scrollbar-color);
@@ -282,7 +283,8 @@
   --td-radius-medium: 6px;
   --td-radius-large: 9px;
   --td-radius-extraLarge: 12px;
-  --td-radius-round: 50%;
+  --td-radius-round: 999px;
+  --td-radius-circle: 50%;
 }
 
 .t-layout {
@@ -2509,7 +2511,7 @@
   width: 100%;
   height: 100%;
   background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   /* stylelint-disable-next-line */
   mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
   /* stylelint-disable-next-line */
@@ -2564,7 +2566,7 @@
   background: var(--td-bg-color-container);
   -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
           box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
   padding: 4px 8px;
   font-size: 14px;
   line-height: 22px;
@@ -3660,7 +3662,7 @@
   padding: 0;
 }
 .t-button--shape-round {
-  border-radius: 16px;
+  border-radius: var(--td-radius-round);
 }
 .t-button--shape-round.t-size-s {
   border-radius: 12px;
@@ -4223,7 +4225,7 @@
   opacity: 1;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
 }
 .t-alert.t-is-hidden {
   /* 隐藏 */
@@ -4498,14 +4500,14 @@
   margin-top: 1px;
   width: 6px;
   height: 6px;
-  border-radius: var(--td-radius-round);
+  border-radius: var(--td-radius-circle);
   background-color: var(--td-error-color);
 }
 .t-badge--circle,
 .t-badge--round {
   padding-right: 6px;
   padding-left: 6px;
-  min-width: 20px;
+  min-width: 8px;
   height: 20px;
   border-radius: 10px;
   background-color: var(--td-error-color);
@@ -4520,7 +4522,7 @@
   line-height: 16px;
 }
 .t-badge--round {
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-round);
 }
 
 .t-radio-group {
@@ -4545,6 +4547,7 @@
   max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
+  border-radius: var(--td-radius-default);
   scrollbar-color: var(--td-scrollbar-color);
   scrollbar-width: thin;
 }
@@ -4592,7 +4595,7 @@
   background-color: var(--td-bg-color-container-select);
   -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-small);
 }
 .t-radio-group.t-radio-group--filled .t-radio-button {
   color: var(--td-text-color-secondary);
@@ -4698,12 +4701,12 @@
           box-sizing: border-box;
 }
 .t-radio-group .t-radio-button:first-child {
-  border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
+  border-radius: var(--td-radius-small) 0 0 var(--td-radius-small);
 }
 .t-radio-group .t-radio-button:last-child {
   border-right: 1px solid;
   border-right-color: var(--td-border-level-2-color);
-  border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
+  border-radius: 0 var(--td-radius-small) var(--td-radius-small) 0;
 }
 .t-radio-group .t-radio-button__former {
   opacity: 0;
@@ -4781,7 +4784,7 @@
   width: 16px;
   height: 16px;
   vertical-align: middle;
-  border-radius: var(--td-radius-round);
+  border-radius: var(--td-radius-circle);
   border: 1px solid var(--td-border-level-2-color);
   background-color: var(--td-bg-color-container);
   -webkit-transition: border 0.2s cubic-bezier(0, 0, 0.15, 1);
@@ -4799,7 +4802,7 @@
   -webkit-transform: scale(0.5);
           transform: scale(0.5);
   opacity: 0;
-  border-radius: var(--td-radius-round);
+  border-radius: var(--td-radius-circle);
   background-color: var(--td-brand-color);
   -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.15, 1);
   transition: all 0.2s cubic-bezier(0, 0, 0.15, 1);
@@ -5401,7 +5404,7 @@
   width: 24px;
   height: 24px;
   text-align: center;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   margin-top: 3px;
   font-size: 16px;
 }
@@ -5512,7 +5515,7 @@
   width: 24px;
   height: 24px;
   text-align: center;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   margin-top: 3px;
   font-size: 16px;
 }
@@ -5530,7 +5533,7 @@
   width: 24px;
   height: 24px;
   text-align: center;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   margin-top: 3px;
   font-size: 16px;
 }
@@ -5549,7 +5552,7 @@
   width: 24px;
   height: 24px;
   text-align: center;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   margin-top: 3px;
   font-size: 16px;
 }
@@ -5731,7 +5734,7 @@
   width: 8px;
   height: 8px;
   border: 2px solid var(--td-text-color-placeholder);
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   margin-bottom: 4px;
   position: relative;
   -webkit-box-sizing: border-box;
@@ -5950,7 +5953,7 @@
   width: 8px;
   height: 8px;
   border: 2px solid var(--td-text-color-placeholder);
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   margin-bottom: 4px;
   position: relative;
   -webkit-box-sizing: border-box;
@@ -6068,7 +6071,7 @@
   width: -moz-fit-content;
   width: fit-content;
   outline: 0;
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
   background-color: var(--td-bg-color-container);
   -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
           box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
@@ -6127,6 +6130,7 @@
   right: 32px;
   cursor: pointer;
   color: var(--td-text-color-secondary);
+  border-radius: var(--td-radius-default);
 }
 .t-message.t-is-closable > .t-message__close .t-icon-close {
   font-size: 16px;
@@ -6343,10 +6347,10 @@
   font-size: 16px;
 }
 .t-tag.t-tag--round {
-  border-radius: 12px;
+  border-radius: var(--td-radius-extraLarge);
 }
 .t-tag.t-tag--mark {
-  border-radius: 0 12px 12px 0;
+  border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0;
 }
 .t-tag.t-tag--ellipsis .t-tag--text {
   display: inline-block;
@@ -6781,7 +6785,6 @@ a .t-tag:active {
   overflow-y: auto;
   -webkit-box-shadow: var(--td-shadow-2);
           box-shadow: var(--td-shadow-2);
-  border-radius: var(--td-radius-default);
 }
 .t-select__dropdown-inner {
   padding: 6px;
@@ -7209,6 +7212,7 @@ ul.t-select-option-group__header,
   word-break: break-word;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  border-radius: var(--td-radius-medium);
 }
 .t-popup .t-tooltip:not(.t-tooltip--light) {
   color: var(--td-text-color-anti);
@@ -7790,7 +7794,7 @@ ul.t-select-option-group__header,
 .t-table__sort-icon:hover {
   color: var(--td-brand-color);
   background-color: var(--td-bg-color-secondarycontainer-hover);
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
 }
 .t-table__filter-icon .t-is-focus,
 .t-table__filter-icon.t-is-focus,
@@ -8787,7 +8791,7 @@ ul.t-select-option-group__header,
           box-shadow: var(--td-shadow-2);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
   width: 400px;
   padding: 20px 24px 24px 24px;
 }
@@ -8875,12 +8879,12 @@ ul.t-select-option-group__header,
 .t-notification__detail-item:hover {
   color: inherit;
   background: var(--td-bg-color-container-hover);
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
 }
 .t-notification__detail-item:active {
   color: inherit;
   background: var(--td-bg-color-container-active);
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
 }
 .t-notification__detail-item + .t-notification__detail-item {
   margin-left: 8px;
@@ -9702,7 +9706,7 @@ a.t-menu__item:active {
   position: absolute;
   background: #fff;
   z-index: 1000;
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
   opacity: 0;
   list-style: none;
   padding: 0;
@@ -10045,7 +10049,7 @@ a.t-menu__item:active {
   width: 480px;
   background-color: var(--td-bg-color-container);
   position: relative;
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-large);
 }
 .t-dialog .t-icon.t-is-info {
   color: var(--td-brand-color);
@@ -10231,15 +10235,8 @@ a.t-menu__item:active {
 }
 .t-dialog__ctx .t-dialog {
   pointer-events: auto;
-  z-index: 5;
-  border: 1px solid var(--td-border-level-1-color);
-}
-.t-dialog__ctx .t-dialog.t-dialog--fixed {
-  position: fixed;
   z-index: 2500;
-}
-.t-dialog__ctx .t-dialog.t-dialog--absolute {
-  position: absolute;
+  border: 1px solid var(--td-border-level-1-color);
 }
 
 .t-tree {
@@ -10587,6 +10584,12 @@ a.t-menu__item:active {
     max-height: calc(42px * var(--hscale) + 0px);
   }
 }
+.t-tree-select.t-single-suffix {
+  padding-right: 20px;
+}
+.t-tree-select.t-tag-prefix {
+  padding-left: 4px;
+}
 
 .t-tree-select {
   font-family: PingFang SC, Microsoft YaHei, Arial Regular;
@@ -10738,7 +10741,7 @@ a.t-menu__item:active {
   left: 2px;
   width: 16px;
   height: 16px;
-  border-radius: 12px;
+  border-radius: var(--td-radius-extraLarge);
   -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
 }
@@ -10753,7 +10756,7 @@ a.t-menu__item:active {
   left: 0;
   right: 0;
   bottom: 0;
-  border-radius: 12px;
+  border-radius: var(--td-radius-extraLarge);
   background-color: var(--td-text-color-anti);
   -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
@@ -11025,7 +11028,7 @@ a.t-menu__item:active {
   content: "";
   width: 6px;
   height: 6px;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   background-color: var(--td-brand-color);
   vertical-align: middle;
   -webkit-animation: fadeOut 2s 2s linear 1;
@@ -11046,6 +11049,7 @@ a.t-menu__item:active {
   list-style: none;
   border: 1px solid var(--td-border-level-1-color);
   background-color: var(--td-bg-color-container);
+  border-radius: var(--td-radius-large);
 }
 .t-calendar .t-is-disabled.t-calendar__table-body-cell:hover {
   cursor: not-allowed;
@@ -11131,6 +11135,7 @@ a.t-menu__item:active {
 }
 .t-calendar--card {
   width: 352px;
+  border-radius: var(--td-radius-medium);
 }
 .t-calendar--card .t-calendar__control {
   padding: 16px 13px 15px;
@@ -11214,7 +11219,7 @@ a.t-menu__item:active {
 .t-calendar--card .t-calendar__table-body-cell-display {
   font-size: 12px;
   text-align: center;
-  border-radius: var(--td-radius-round);
+  border-radius: var(--td-radius-circle);
   -webkit-transition-duration: 0.2s;
           transition-duration: 0.2s;
   -webkit-transition-property: border-top, background;
@@ -11246,7 +11251,7 @@ a.t-menu__item:active {
   width: 6px;
   height: 6px;
   background: var(--td-brand-color);
-  border-radius: 6px;
+  border-radius: var(--td-radius-medium);
 }
 .t-calendar--card .t-is-checked .t-calendar__table-body-cell-display {
   background: var(--td-brand-color);
@@ -11581,6 +11586,7 @@ a.t-menu__item:active {
 }
 .t-range-input__inner .t-input__wrap {
   height: 100%;
+  border-radius: var(--td-radius-small);
 }
 .t-range-input__inner .t-input {
   padding: 0 4px;
@@ -12365,7 +12371,7 @@ a.t-menu__item:active {
   line-height: unset;
   color: var(--td-text-color-primary);
   border-bottom: 1px solid var(--td-border-level-1-color);
-  border-radius: 2px 2px 0 0;
+  border-radius: var(--td-radius-small) var(--td-radius-small) 0 0;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
@@ -12409,6 +12415,7 @@ a.t-menu__item:active {
   right: 16px;
   color: var(--td-text-color-primary);
   background-color: var(--td-bg-color-container);
+  border-radius: var(--td-radius-default);
   cursor: pointer;
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
@@ -12459,7 +12466,7 @@ a.t-menu__item:active {
   position: relative;
   height: 100%;
   background: var(--td-brand-color);
-  border-radius: 50px;
+  border-radius: var(--td-radius-round);
   -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
 }
@@ -12476,7 +12483,7 @@ a.t-menu__item:active {
   height: 6px;
   overflow: hidden;
   background: var(--td-bg-color-component);
-  border-radius: 3px;
+  border-radius: var(--td-radius-round);
 }
 .t-progress--thin {
   display: -webkit-box;
@@ -12625,12 +12632,12 @@ a.t-menu__item:active {
   padding: 0;
   list-style: none;
   min-width: 160px;
-  border-radius: 6px;
+  border-radius: var(--td-radius-medium);
 }
 .t-popconfirm__content {
   position: relative;
   padding: 16px;
-  border-radius: 6px;
+  border-radius: var(--td-radius-medium);
 }
 .t-popconfirm__body {
   display: -webkit-box;
@@ -13029,7 +13036,6 @@ a.t-menu__item:active {
   list-style: none;
   background-color: var(--td-bg-color-container);
   position: relative;
-  border-radius: var(--td-radius-default);
   padding: 0;
 }
 .t-dropdown__menu {
@@ -13173,7 +13179,7 @@ a.t-menu__item:active {
   background-color: var(--td-bg-color-component);
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
-  border-radius: 4px;
+  border-radius: var(--td-radius-round);
 }
 .t-slider__rail:hover {
   background-color: var(--td-bg-color-component-hover);
@@ -13183,7 +13189,7 @@ a.t-menu__item:active {
   height: 4px;
   background-color: var(--td-brand-color);
   right: auto;
-  border-radius: 4px;
+  border-radius: var(--td-radius-round);
 }
 .t-slider__step {
   position: absolute;
@@ -13196,7 +13202,7 @@ a.t-menu__item:active {
   height: 16px;
   border: 2px solid var(--td-brand-color);
   background-color: #fff;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   -webkit-transition: 0.2s;
   transition: 0.2s;
   -webkit-user-select: none;
@@ -13257,7 +13263,7 @@ a.t-menu__item:active {
   line-height: 20px;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  margin-top: 4px;
+  margin-top: var(--td-radius-round);
   cursor: pointer;
 }
 .t-slider__mark-text:first-child {
@@ -13371,6 +13377,8 @@ a.t-menu__item:active {
 }
 .t-cascader__popup {
   padding: 0;
+  -webkit-box-shadow: var(--td-shadow-2);
+          box-shadow: var(--td-shadow-2);
 }
 .t-cascader__panel {
   display: -webkit-box;
@@ -13404,6 +13412,7 @@ a.t-menu__item:active {
           box-sizing: content-box;
   padding: 8px;
   background: var(--td-bg-color-container);
+  border-radius: var(--td-radius-medium);
 }
 .t-cascader__menu--segment {
   border-right: 0.5px solid var(--td-component-stroke);
@@ -13775,6 +13784,7 @@ a.t-menu__item:active {
 }
 .t-date-picker__panel-year,
 .t-date-picker__panel-month,
+.t-date-picker__panel-quarter,
 .t-date-picker__panel-week,
 .t-date-picker__panel-date {
   display: -webkit-box;
@@ -13790,11 +13800,13 @@ a.t-menu__item:active {
   max-width: 280px;
 }
 .t-date-picker__panel-year .t-date-picker__header-controller-year,
-.t-date-picker__panel-month .t-date-picker__header-controller-year {
+.t-date-picker__panel-month .t-date-picker__header-controller-year,
+.t-date-picker__panel-quarter .t-date-picker__header-controller-year {
   width: 130px;
 }
 .t-date-picker__panel-year .t-date-picker__table table tbody,
-.t-date-picker__panel-month .t-date-picker__table table tbody {
+.t-date-picker__panel-month .t-date-picker__table table tbody,
+.t-date-picker__panel-quarter .t-date-picker__table table tbody {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -13806,7 +13818,8 @@ a.t-menu__item:active {
           flex-direction: column;
 }
 .t-date-picker__panel-year .t-date-picker__table table tbody tr,
-.t-date-picker__panel-month .t-date-picker__table table tbody tr {
+.t-date-picker__panel-month .t-date-picker__table table tbody tr,
+.t-date-picker__panel-quarter .t-date-picker__table table tbody tr {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13815,19 +13828,23 @@ a.t-menu__item:active {
           justify-content: space-between;
 }
 .t-date-picker__panel-year .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before,
-.t-date-picker__panel-month .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before {
+.t-date-picker__panel-month .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before,
+.t-date-picker__panel-quarter .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before {
   left: -56px;
 }
 .t-date-picker__panel-year .t-date-picker__cell:nth-child(1),
-.t-date-picker__panel-month .t-date-picker__cell:nth-child(1) {
+.t-date-picker__panel-month .t-date-picker__cell:nth-child(1),
+.t-date-picker__panel-quarter .t-date-picker__cell:nth-child(1) {
   text-align: left;
 }
 .t-date-picker__panel-year .t-date-picker__cell:nth-child(3),
-.t-date-picker__panel-month .t-date-picker__cell:nth-child(3) {
+.t-date-picker__panel-month .t-date-picker__cell:nth-child(3),
+.t-date-picker__panel-quarter .t-date-picker__cell:nth-child(3) {
   text-align: right;
 }
 .t-date-picker__panel-year .t-date-picker__cell-inner,
-.t-date-picker__panel-month .t-date-picker__cell-inner {
+.t-date-picker__panel-month .t-date-picker__cell-inner,
+.t-date-picker__panel-quarter .t-date-picker__cell-inner {
   width: 48px;
 }
 .t-date-picker__cell {
@@ -14233,7 +14250,7 @@ a.t-menu__item:active {
   width: 336px;
   height: 144px;
   border: 1px dashed var(--td-component-border);
-  border-radius: 2px;
+  border-radius: var(--td-radius-small);
   font-size: 14px;
   color: var(--td-text-color-secondary);
   cursor: pointer;
@@ -15441,7 +15458,7 @@ a.t-menu__item:active {
 .t-comment__avatar-image {
   width: 56px;
   height: 56px;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
 }
 .t-comment__content {
   -webkit-box-flex: 1;
@@ -15511,6 +15528,7 @@ a.t-menu__item:active {
   margin-top: 16px;
   margin-left: 80px;
   background-color: var(--td-bg-color-secondarycontainer);
+  border-radius: var(--td-radius-medium);
   padding: 16px 24px;
 }
 
@@ -15551,7 +15569,7 @@ a.t-menu__item:active {
 .t-transfer__list-source,
 .t-transfer__list-target {
   border: 1px solid var(--td-border-level-1-color);
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
 }
 .t-transfer__list-header {
   position: absolute;
@@ -15797,10 +15815,10 @@ a.t-menu__item:active {
   width: 32px;
 }
 .t-avatar--circle {
-  border-radius: var(--td-radius-round);
+  border-radius: var(--td-radius-circle);
 }
 .t-avatar--round {
-  border-radius: 3px;
+  border-radius: var(--td-radius-default);
 }
 .t-avatar.t-size-s {
   width: 24px;
@@ -16070,17 +16088,17 @@ a.t-menu__item:active {
 .t-skeleton--type-text {
   width: 100%;
   height: 16px;
-  border-radius: 3px;
+  border-radius: var(--td-radius-default);
 }
 .t-skeleton--type-rect {
   width: 120px;
   height: 88px;
-  border-radius: 3px;
+  border-radius: var(--td-radius-default);
 }
 .t-skeleton--type-circle {
   width: 32px;
   height: 32px;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
@@ -16155,6 +16173,7 @@ a.t-menu__item:active {
   background: var(--td-bg-color-container);
   -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
           box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
+  border-radius: var(--td-radius-medium);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -16239,7 +16258,7 @@ a.t-menu__item:active {
   border-color: currentcolor;
   width: 14px;
   height: 14px;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
           box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
   background: white;
@@ -16253,7 +16272,7 @@ a.t-menu__item:active {
   width: 100%;
   height: 100%;
   background: currentcolor;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   display: block;
 }
 .t-color-picker__saturation {
@@ -16283,7 +16302,7 @@ a.t-menu__item:active {
 .t-color-picker__saturation .t-color-picker__thumb {
   width: 14px;
   height: 14px;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
 }
@@ -16397,7 +16416,7 @@ a.t-menu__item:active {
   display: block;
   width: 100%;
   height: 100%;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   overflow: hidden;
   background-size: 4px 4px;
   background-position: 0 0, 2px 2px;
@@ -16563,7 +16582,7 @@ a.t-menu__item:active {
   display: flex;
   width: 23px;
   height: 23px;
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   padding: 2px;
   border: 1px solid transparent;
   overflow: hidden;
@@ -16588,7 +16607,7 @@ a.t-menu__item:active {
   position: relative;
   overflow: hidden;
   border: 1px solid var(--td-component-border);
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
@@ -16610,7 +16629,7 @@ a.t-menu__item:active {
   position: relative;
   overflow: hidden;
   border: 1px solid var(--td-component-border);
-  border-radius: 50%;
+  border-radius: var(--td-radius-circle);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
@@ -16683,7 +16702,7 @@ a.t-menu__item:active {
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border-radius: var(--td-radius-default);
+  border-radius: var(--td-radius-medium);
   background-color: var(--td-bg-color-container);
   color: var(--td-text-color-primary);
   -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;