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

package/esm/_common/style/web/components/form/_index.less

@@ -153,7 +153,7 @@
 
 .@{prefix}-input__extra {
   position: absolute;
-  bottom: -@form-item-help-line-height;
+  bottom: calc(0px - @form-item-help-line-height);
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

package/esm/_common/style/web/components/guide/_index.less

@@ -34,7 +34,7 @@
 
   &__highlight {
     z-index: @guide-highlight-z-index;
-    transition: .3s ease-out;
+    transition: @anim-duration-base @anim-time-fn-ease-out;
     border-radius: @border-radius-default;
 
     &--dialog {
@@ -76,7 +76,7 @@
   &__dialog {
     min-width: 320px;
     max-width: 500px;
-    padding: @spacer-3 @spacer-4 @spacer-4;
+    padding: @guide-dialog-padding;
     border-radius: @border-radius-large;
     background: @bg-color-container;
     animation: tGuideDialogFadeIn .3s ease-out;
@@ -92,13 +92,13 @@
     }
 
     .@{prefix}-@{componentName}__desc {
-      margin-top: @spacer-l;
+      margin-top: @guide-dialog-desc-margin-top;
       font: @font-body-medium;
     }
   }
 
   &__tooltip {
-    padding: @spacer-l @spacer;
+    padding: @guide-tooltip-padding;
     min-width: 240px;
     max-width: 600px;
     max-height: 300px;
@@ -112,7 +112,7 @@
   }
 
   &__desc {
-    margin-top: @spacer;
+    margin-top: @guide-tooltip-desc-margin-top;
     text-align: left;
     color: @text-color-secondary;
     font: @font-body-small;
@@ -123,7 +123,7 @@
     align-items: center;
 
     button {
-      margin-right: @spacer;
+      margin-right: @guide-action-margin-right;
     }
 
     button:last-child {
@@ -136,7 +136,7 @@
     align-items: center;
 
     &--popup {
-      margin-top: @spacer-2;
+      margin-top: @guide-footer-popup-margin-top;
     }
 
     &--dialog {
@@ -152,7 +152,7 @@
   }
 
   &__counter {
-    color: @font-gray-3;
+    color: @text-color-placeholder;
     text-align: left;
     font: @font-body-small;
     flex: 1;

package/esm/_common/style/web/components/guide/_var.less

@@ -2,3 +2,13 @@
 @guide-overlay-z-index: @z-index-guide - 2;
 @guide-highlight-z-index: @z-index-guide - 1;
 @guide-reference-z-index: @z-index-guide;
+
+// margin 间距相关
+@guide-footer-popup-margin-top: @comp-margin-l;
+@guide-dialog-desc-margin-top: @comp-margin-l;
+@guide-tooltip-desc-margin-top: @comp-margin-s;
+@guide-action-margin-right: @comp-margin-s;
+
+// padding 边距
+@guide-dialog-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl;
+@guide-tooltip-padding: @comp-paddingTB-m @comp-paddingLR-s;

package/esm/_common/style/web/components/layout/_var.less

@@ -24,11 +24,8 @@
 @layout-footer-color: @text-color-placeholder;
 
 // 尺寸
-@layout-header-height: 64px;
+@layout-header-height: @comp-size-xxxl;
 @layout-sider-width: 232px;
 
-// 间距
-@layout-footer-spacer: @spacer-3;
-
 // 动画
-@layout-sider-anim-duration: .22s;
+@layout-sider-anim-duration: @anim-duration-base;

package/esm/_common/style/web/components/link/_var.less

@@ -3,13 +3,13 @@
 @link-font-default: @font-link-medium;
 @link-font-l: @font-link-large;
 
-@link-icon-margin-s: @spacer-s;
-@link-icon-margin-default: @spacer-1;
-@link-icon-margin-l: @spacer-l;
+@link-icon-margin-s: @comp-margin-xs;
+@link-icon-margin-default: @comp-margin-s;
+@link-icon-margin-l: @comp-margin-m;
 
 // 按钮中icon和文字的间距
-@link-icon-text-margin-left: @spacer-s;
-@link-icon-text-margin-right: @spacer-s;
+@link-icon-text-margin-left: @comp-margin-xs;
+@link-icon-text-margin-right: @comp-margin-xs;
 
 @link-color-default: @text-color-primary;
 @link-color-default-hover: @brand-color-hover;

package/esm/_common/style/web/components/menu/_index-v2.less

@@ -33,19 +33,19 @@ a.@{prefix}-menu__item {
     height: 64px;
 
     li + li {
-      margin-left: 4px;
+      margin-left: @comp-margin-xs;
     }
 
     .@{prefix}-menu {
       &:first-child {
-        margin-left: 24px;
+        margin-left: @comp-margin-xxl;
       }
     }
   }
 
   .@{prefix}-menu__logo:not(:empty) {
     height: 100%;
-    margin-right: 32px;
+    margin-right: @comp-margin-xxxl;
   }
 
   .@{prefix}-menu {
@@ -63,14 +63,14 @@ a.@{prefix}-menu__item {
       height: 64px;
       line-height: 64px;
       text-align: right;
-      margin-right: 8px;
+      margin-right: @comp-margin-s;
       overflow: hidden;
     }
 
     &-icon {
       width: 40px;
       height: 40px;
-      padding: 8px;
+      padding: @comp-paddingTB-s @comp-paddingLR-s;
       line-height: 40px;
     }
   }
@@ -150,8 +150,8 @@ a.@{prefix}-menu__item {
       align-items: center;
       justify-content: flex-start;
       white-space: nowrap;
-      padding-left: 16px;
-      padding-right: 16px;
+      padding-left: @comp-paddingLR-l;
+      padding-right: @comp-paddingLR-l;
       min-width: 100%;
       margin-left: 0;
       color: @head-menu-popup-item-color;
@@ -159,17 +159,17 @@ a.@{prefix}-menu__item {
     }
 
     li + li {
-      margin-top: 4px;
+      margin-top: @comp-margin-xs;
       margin-left: 0;
     }
   }
 
   .@{prefix}-submenu-icon { // to remove
-    margin-left: 8px;
+    margin-left: @comp-margin-s;
   }
 
   .@{prefix}-fake-arrow {
-    margin-left: 8px;
+    margin-left: @comp-margin-s;
   }
 
   // 多层情况
@@ -183,7 +183,7 @@ a.@{prefix}-menu__item {
 
     .@{prefix}-menu__item {
       text-align: left;
-      padding: 0 16px;
+      padding: 0 @comp-paddingLR-l;
       justify-content: space-between;
     }
 
@@ -380,7 +380,7 @@ a.@{prefix}-menu__item {
     }
 
     .@{prefix}-menu {
-      padding: 16px 8px;
+      padding: @comp-paddingTB-l @comp-paddingLR-s;
       position: relative;
       // overflow: hidden auto;
       flex: 1;
@@ -404,7 +404,7 @@ a.@{prefix}-menu__item {
   }
 
   .@{prefix}-submenu {
-    margin-bottom: 4px;
+    margin-bottom: @comp-margin-xs;
     position: relative;
   }
 
@@ -412,7 +412,7 @@ a.@{prefix}-menu__item {
     &:not(:empty) {
       width: 100%;
       position: relative;
-      padding: 8px 16px;
+      padding: @comp-paddingTB-s @comp-paddingLR-l;
       top: 0;
       left: 0;
       text-align: left;
@@ -423,7 +423,7 @@ a.@{prefix}-menu__item {
     &-icon {
       width: 32px;
       height: 32px;
-      padding: 8px;
+      padding: @comp-paddingTB-s @comp-paddingLR-s;
       cursor: pointer;
       color: @menu-operations-color;
       box-sizing: border-box;
@@ -433,7 +433,7 @@ a.@{prefix}-menu__item {
   .@{prefix}-menu__item {
 
     &.@{prefix}-is-opened {
-      margin: 4px 0;
+      margin: @comp-margin-xs 0;
       color: @menu-light-active-color;
       background-color: unset;
 
@@ -481,7 +481,7 @@ a.@{prefix}-menu__item {
 
   .@{prefix}-menu__item {
     position: relative;
-    margin: 4px 0;
+    margin: @comp-margin-xs 0;
     padding: 0 10px 0 16px;
     height: @default-menu-item-height;
     line-height: @default-menu-item-height;
@@ -523,7 +523,7 @@ a.@{prefix}-menu__item {
       background: @menu-light-active-bg;
 
       & + .@{prefix}-menu__item {
-        margin-top: 4px;
+        margin-top: @comp-margin-xs;
       }
     }
   }
@@ -692,7 +692,7 @@ a.@{prefix}-menu__item {
 
   .t-icon + &__content,
   .t-icon + &__item-link {
-    margin-left: 8px;
+    margin-left: @comp-margin-s;
   }
 
   &--dark {
@@ -789,14 +789,14 @@ a.@{prefix}-menu__item {
     .list-style-none();
 
     &-wrapper {
-      padding: 8px;
+      padding: @comp-paddingTB-s @comp-paddingLR-s;
       height: 100%;
       list-style: none;
       margin: 0;
     }
 
     .@{prefix}-fake-arrow {
-      margin-left: 8px;
+      margin-left: @comp-margin-s;
     }
 
     &.@{prefix}-is-vertical {
@@ -808,16 +808,16 @@ a.@{prefix}-menu__item {
       }
 
       .@{prefix}-menu__item {
-        padding-left: 16px;
-        padding-right: 16px;
+        padding-left: @comp-paddingLR-l;
+        padding-right: @comp-paddingLR-l;
         margin: 4px 0;
       }
     }
 
     &.@{prefix}-is-horizontal {
       .@{prefix}-menu__item {
-        padding-left: 16px;
-        padding-right: 16px;
+        padding-left: @comp-paddingLR-l;
+        padding-right: @comp-paddingLR-l;
         white-space: nowrap;
       }
 
@@ -896,7 +896,7 @@ a.@{prefix}-menu__item {
 
   &__operations {
     &-icon {
-      margin-right: 16px;
+      margin-right: @comp-margin-l;
       border-radius: @border-radius-default;
       color: @menu-item-color--light;
       transition: background-color @anim-duration-moderate @anim-time-fn-easing;

package/esm/_common/style/web/components/menu/_index.less

@@ -33,19 +33,19 @@ a.@{prefix}-menu__item {
     height: 64px;
 
     li + li {
-      margin-left: 4px;
+      margin-left: @comp-margin-xs;
     }
 
     .@{prefix}-menu {
       &:first-child {
-        margin-left: 24px;
+        margin-left: @comp-margin-xxl;
       }
     }
   }
 
   .@{prefix}-menu__logo:not(:empty) {
     height: 100%;
-    margin-right: 32px;
+    margin-right: @comp-margin-xxxl;
   }
 
   .@{prefix}-menu {
@@ -63,14 +63,14 @@ a.@{prefix}-menu__item {
       height: 64px;
       line-height: 64px;
       text-align: right;
-      margin-right: 8px;
+      margin-right: @comp-margin-s;
       overflow: hidden;
     }
 
     &-icon {
       width: 40px;
       height: 40px;
-      padding: 8px;
+      padding: @comp-paddingTB-s @comp-paddingLR-s;
       line-height: 40px;
       box-sizing: border-box;
     }
@@ -148,8 +148,8 @@ a.@{prefix}-menu__item {
       align-items: center;
       justify-content: flex-start;
       white-space: nowrap;
-      padding-left: 16px;
-      padding-right: 16px;
+      padding-left: @comp-paddingLR-l;
+      padding-right: @comp-paddingLR-l;
       min-width: 100%;
       margin-left: 0;
       color: @head-menu-popup-item-color;
@@ -164,11 +164,11 @@ a.@{prefix}-menu__item {
 
   .@{prefix}-submenu-icon {
     // to remove
-    margin-left: 8px;
+    margin-left: @comp-margin-s;
   }
 
   .@{prefix}-fake-arrow {
-    margin-left: 8px;
+    margin-left: @comp-margin-s;
   }
 
   // 多层情况
@@ -376,7 +376,7 @@ a.@{prefix}-menu__item {
     }
 
     .@{prefix}-menu {
-      padding: 16px 8px;
+      padding: @comp-paddingTB-l @comp-paddingLR-s;
       position: relative;
       // overflow: hidden auto;
       flex: 1;
@@ -399,7 +399,7 @@ a.@{prefix}-menu__item {
   }
 
   .@{prefix}-submenu {
-    margin-bottom: 4px;
+    margin-bottom: @comp-margin-xs;
     position: relative;
   }
 
@@ -407,7 +407,7 @@ a.@{prefix}-menu__item {
     &:not(:empty) {
       width: 100%;
       position: relative;
-      padding: 8px 16px;
+      padding: @comp-paddingTB-s @comp-paddingLR-l;
       top: 0;
       left: 0;
       text-align: left;
@@ -418,7 +418,7 @@ a.@{prefix}-menu__item {
     &-icon {
       width: 32px;
       height: 32px;
-      padding: 8px;
+      padding: @comp-paddingTB-s @comp-paddingLR-s;
       cursor: pointer;
       color: @menu-operations-color;
       box-sizing: border-box;
@@ -427,7 +427,7 @@ a.@{prefix}-menu__item {
 
   .@{prefix}-menu__item {
     &.@{prefix}-is-opened {
-      margin: 4px 0;
+      margin: @comp-margin-xs 0;
       color: @menu-light-active-color;
       background-color: unset;
 
@@ -476,7 +476,7 @@ a.@{prefix}-menu__item {
 
   .@{prefix}-menu__item {
     position: relative;
-    margin: 4px 0;
+    margin: @comp-margin-xs 0;
     padding: 0 10px 0 16px;
     height: @default-menu-item-height;
     line-height: @default-menu-item-height;
@@ -517,7 +517,7 @@ a.@{prefix}-menu__item {
       background: @menu-light-active-bg;
 
       & + .@{prefix}-menu__item {
-        margin-top: 4px;
+        margin-top: @comp-margin-xs;
       }
     }
   }
@@ -677,7 +677,7 @@ a.@{prefix}-menu__item {
 
   .t-icon + &__content,
   .t-icon + &__item-link {
-    margin-left: 8px;
+    margin-left: @comp-margin-s;
   }
 
   &--dark {
@@ -794,14 +794,14 @@ a.@{prefix}-menu__item {
     .list-style-none();
 
     &-wrapper {
-      padding: 8px;
+      padding: @comp-paddingLR-s;
       height: 100%;
       list-style: none;
       margin: 0;
     }
 
     .@{prefix}-fake-arrow {
-      margin-left: 8px;
+      margin-left: @comp-margin-s;
     }
 
     &.@{prefix}-is-vertical {
@@ -813,21 +813,21 @@ a.@{prefix}-menu__item {
       }
 
       .@{prefix}-menu__item {
-        padding-left: 16px;
-        padding-right: 16px;
+        padding-left: @comp-paddingLR-l;
+        padding-right: @comp-paddingLR-l;
         margin: 4px 0;
       }
     }
 
     &.@{prefix}-is-horizontal {
       .@{prefix}-menu__item {
-        padding-left: 16px;
-        padding-right: 16px;
+        padding-left: @comp-paddingLR-l;
+        padding-right: @comp-paddingLR-l;
         white-space: nowrap;
       }
 
       li + li {
-        margin-top: 4px;
+        margin-top: @comp-margin-xs;
       }
     }
 
@@ -874,7 +874,7 @@ a.@{prefix}-menu__item {
 
   &__operations {
     &-icon {
-      margin-right: 16px;
+      margin-right: @comp-margin-l;
       border-radius: @border-radius-default;
       color: @menu-item-color--light;
       transition: background-color @anim-duration-moderate @anim-time-fn-easing;

package/esm/_common/style/web/components/menu/_var.less

@@ -81,13 +81,7 @@
 @default-menu-item-height: 36px;
 
 // popup
-@popup-item-padding-left: 16px;
-
-// 边距
-@menu-padding-horizontal-default: @spacer;
-@menu-padding-horizontal-high: (@spacer * 1.5);
-
-@textarea-limited-padding: (@spacer * 4);
+@popup-item-padding-left: @comp-paddingTB-l @comp-paddingLR-l;
 
 // 高度
 @menu-height-default: 32px; // low

package/esm/_common/style/web/components/message/_index.less

@@ -51,7 +51,7 @@
       color: @msg-close-icon-color;
 
       .t-icon-close {
-        font-size: @msg-close-font-size;
+        font-size: @msg-close-size;
         border-radius: @border-radius-default;
         transition: all @anim-duration-base linear;
 

package/esm/_common/style/web/components/message/_var.less

@@ -23,11 +23,9 @@
 @msg-close-bg-color-hover: @bg-color-container-hover;
 @msg-close-bg-color-active: @bg-color-container-active;
 
-// 位置
-@msg-icon-position-right: @spacer-4;
-
 // 尺寸
-@msg-icon-size: @font-size-xl;
+@msg-icon-size: calc(@font-size-base + 6px);
+@msg-close-size: calc(@font-size-base + 2px);
 @msg-border-width: 1px;
 
 // 圆角
@@ -38,14 +36,13 @@
 
 //字号
 @msg-font-default: @font-body-medium;
-@msg-close-font-size: @font-size-l;
 
 // 间距
-@msg-padding-horizontal-default: @spacer-2;
-@msg-padding-vertical-default: 13px;
-@msg-icon-margin-right: @spacer;
-@msg-close-icon-margin-left: @spacer-3;
-@msg-list-margin-bottom: @spacer-1;
+@msg-padding-horizontal-default: @comp-paddingLR-l;
+@msg-padding-vertical-default: @comp-paddingTB-m;
+@msg-icon-margin-right: @comp-margin-s;
+@msg-close-icon-margin-left: @comp-margin-xxl;
+@msg-list-margin-bottom: @comp-margin-s;
 
 // Angular Icon 组件会多一层容器，这层容器用 [data-t-icon] 命中
 @msg-icon-selector: ~"> .t-icon, > [data-@{prefix}-icon] > .t-icon, .@{prefix}-loading";

package/esm/_common/style/web/components/notification/_index.less

@@ -73,7 +73,6 @@
     margin-top: @notification-content-margin-top;
     max-height: @notification-content-max-height;
     overflow: hidden;
-    padding-right: @notification-content-padding-right;
     text-overflow: ellipsis;
     word-break: break-all;
     // 需要排查兼容性
@@ -94,21 +93,17 @@
   }
 
   &__detail-item {
-    padding: @notification-detail-item-padding;
-    color: @notification-detail-item-color;
     cursor: pointer;
   }
 
   &__detail-item:hover {
     color: @notification-detail-item-color-hover;
     background: @notification-detail-item-bg-color-hover;
-    border-radius: @notification-detail-item-border-radius;
   }
 
   &__detail-item:active {
     color: @notification-detail-item-color-active;
     background: @notification-detail-item-bg-color-active;
-    border-radius: @notification-detail-item-border-radius;
   }
 
   &__detail-item + &__detail-item {

package/esm/_common/style/web/components/notification/_var.less

@@ -30,9 +30,11 @@
 @notification-close-bg-color-active: @bg-color-container-active;
 
 // 尺寸
-@notification-width-default: 400px;
+@notification-width-default: 360px;
 @notification-content-max-height: 66px;
-@notification-icon-width: @icon-l;
+@notification-icon-width: calc(@font-size-l + 8px);
+@notification-icon-font-size: calc(@font-size-l + 8px);
+@notification-icon-close-font-size: @font-size-l;
 
 // 圆角
 @notification-detail-item-border-radius: @border-radius-medium;
@@ -45,17 +47,13 @@
 @notification-font: @font-body-medium;
 @notification-detail-font: @font-body-medium;
 @notification-content-font: @font-body-medium;
-@notification-icon-font-size: (@font-size * 2.4);
-@notification-icon-close-font-size: @font-size-l;
 @notification-title-font: @font-title-medium;
 
 // padding
-@notification-detail-item-padding: 5px 16px;
-@notification-content-padding-right: 5px;
-@notification-padding-default: 20px @spacer-3 @spacer-3 @spacer-3;
+@notification-padding-default: @comp-paddingTB-l @comp-paddingLR-l;
 
 //margin
-@notification-detail-margin-top: 21px;
-@notification-content-margin-top: @spacer;
-@notification-icon-margin-right: @spacer;
-@notification-detail-item-margin-left: @spacer;
+@notification-detail-margin-top: @comp-margin-l;
+@notification-content-margin-top: @comp-margin-s;
+@notification-icon-margin-right: @comp-margin-s;
+@notification-detail-item-margin-left: @comp-margin-s;

package/esm/_common/style/web/components/pagination/_index.less

@@ -98,7 +98,7 @@
 
     .pagination-number--size(
       @pagination-height-default; @pagination-font-default;
-      @pagination-padding-horizontal-default; @pagination-height-default - 2;
+      @pagination-padding-horizontal-default; calc(@pagination-height-default - 2px);
     );
 
     &:hover {

package/esm/_common/style/web/components/pagination/_var.less

@@ -17,8 +17,8 @@
 @pagination-border-radius-base: @border-radius-default;
 
 // 尺寸
-@pagination-height-s: 24px;
-@pagination-height-default: 32px;
+@pagination-height-s: @comp-size-xs;
+@pagination-height-default: @comp-size-m;
 @pagination-input-width: 48px;
 
 // 字号
@@ -27,12 +27,12 @@
 @pagination-btn-font-size: @font-body-large;
 
 // 间距
-@pagination-padding-horizontal-s: (@spacer / 4);
-@pagination-padding-horizontal-default: (@spacer / 2);
-@pagination-btn-margin: @spacer;
-@pagination-jump-margin: @spacer;
-@pagination-select-margin: (@spacer * 2);
-@pagination-pager-margin: @spacer;
+@pagination-padding-horizontal-s: @comp-paddingLR-xxs;
+@pagination-padding-horizontal-default: @comp-paddingLR-xs;
+@pagination-btn-margin: @comp-margin-s;
+@pagination-jump-margin: @comp-margin-s;
+@pagination-select-margin: @comp-margin-l;
+@pagination-pager-margin: @comp-margin-s;
 
 // 过渡
 @pagination-hover-transition: all @anim-duration-base @anim-time-fn-ease-in;