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

package/es/drawer/style/index.css

@@ -130,8 +130,14 @@
           transform: translateY(100%);
 }
 .t-drawer__header {
-  min-height: 56px;
-  padding: 16px 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: var(--td-comp-size-xxxl);
+  padding: 0 var(--td-comp-paddingLR-l);
   font: var(--td-font-title-medium);
   color: var(--td-text-color-primary);
   border-bottom: 1px solid var(--td-border-level-1-color);
@@ -140,7 +146,7 @@
           box-sizing: border-box;
 }
 .t-drawer__body {
-  padding: 16px;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
   overflow: auto;
   -webkit-box-flex: 1;
       -ms-flex: 1;
@@ -148,8 +154,7 @@
 }
 .t-drawer__footer {
   width: 100%;
-  min-height: 56px;
-  padding: 10px 16px;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
   text-align: left;
   border-top: 1px solid var(--td-border-level-1-color);
   background-color: var(--td-bg-color-container);
@@ -157,7 +162,7 @@
           box-sizing: border-box;
 }
 .t-drawer__footer .t-button {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-drawer__footer .t-button:first-child {
   margin-left: 0;
@@ -173,10 +178,10 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 24px;
-  height: 24px;
-  top: 16px;
-  right: 16px;
+  width: var(--td-comp-size-xs);
+  height: var(--td-comp-size-xs);
+  top: var(--td-comp-margin-s);
+  right: var(--td-comp-margin-s);
   color: var(--td-text-color-primary);
   background-color: var(--td-bg-color-container);
   border-radius: var(--td-radius-default);
@@ -191,7 +196,7 @@
   background-color: var(--td-bg-color-container-active);
 }
 .t-drawer__close-btn .t-icon {
-  font-size: var(--td-font-size-body-large);
+  font-size: calc(var(--td-font-size-body-medium) + 2px);
   vertical-align: unset;
 }
 .t-drawer--open {

package/es/dropdown/style/index.css

@@ -28,7 +28,7 @@
       -ms-flex-direction: column;
           flex-direction: column;
   border-radius: var(--td-radius-medium);
-  padding: 6px;
+  padding: var(--td-pop-padding-m);
   gap: 2px;
   overflow-y: auto;
   overflow-x: hidden;
@@ -48,12 +48,12 @@
   background-color: var(--td-scrollbar-hover-color);
 }
 .t-dropdown__menu .t-divider {
-  margin: 4px auto 2px;
+  margin: var(--td-comp-margin-xs) var(--td-comp-margin-s) var(--td-comp-margin-xxs) var(--td-comp-margin-s);
   color: var(--td-brand-color-light);
-  width: calc(100% - 16px);
+  width: calc(100% - var(--td-comp-margin-s) * 2);
 }
 .t-dropdown__menu--right .t-dropdown__item-direction {
-  margin: 0 0 0 8px;
+  margin: 0 0 0 var(--td-comp-margin-s);
 }
 .t-dropdown__menu--left .t-dropdown__item {
   -webkit-box-pack: right;
@@ -64,7 +64,7 @@
   text-align: right;
 }
 .t-dropdown__menu--left .t-dropdown__item-direction {
-  margin: 0 8px 0 0;
+  margin: 0 var(--td-comp-margin-s) 0 0;
 }
 .t-dropdown__submenu {
   background-color: var(--td-bg-color-container);
@@ -74,7 +74,7 @@
   border: 0.5px solid var(--td-component-border);
   z-index: 1100;
   position: absolute;
-  padding: 6px;
+  padding: var(--td-pop-padding-m);
   display: none;
 }
 .t-dropdown__submenu ul {
@@ -90,7 +90,7 @@
   left: calc(100% - 6px);
 }
 .t-dropdown__submenu--right .t-dropdown__item-direction {
-  margin: 0 0 0 8px;
+  margin: 0 0 0 var(--td-comp-margin-s);
 }
 .t-dropdown__submenu--left {
   right: calc(100% - 6px);
@@ -104,7 +104,7 @@
   text-align: right;
 }
 .t-dropdown__submenu--left .t-dropdown__item-direction {
-  margin: 0 8px 0 0;
+  margin: 0 var(--td-comp-margin-s) 0 0;
 }
 .t-dropdown__item {
   border-radius: var(--td-radius-default);
@@ -124,7 +124,8 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 3px 8px;
+  height: var(--td-comp-size-s);
+  padding: 0 var(--td-comp-paddingLR-s);
   --ripple-color: var(--td-bg-color-container-active);
 }
 .t-dropdown__item-icon {
@@ -132,7 +133,7 @@
   display: -ms-flexbox;
   display: flex;
   color: currentcolor;
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
   font-size: var(--td-font-size-body-large);
 }
 .t-dropdown__item:hover > div {

package/es/form/Form.js

@@ -148,7 +148,7 @@ import '../hooks/useCommonClassName.js';
 import '../upload/hooks/useDrag.js';
 import '../image-viewer/index.js';
 import '../image-viewer/ImageViewer.js';
-import '../_chunks/dep-51336096.js';
+import '../_chunks/dep-26aef3c9.js';
 import '../tooltip/index.js';
 import '../tooltip/Tooltip.js';
 import '../popup/index.js';

package/es/form/FormItem.js

@@ -144,7 +144,7 @@ import '../hooks/useCommonClassName.js';
 import '../upload/hooks/useDrag.js';
 import '../image-viewer/index.js';
 import '../image-viewer/ImageViewer.js';
-import '../_chunks/dep-51336096.js';
+import '../_chunks/dep-26aef3c9.js';
 import '../tooltip/index.js';
 import '../tooltip/Tooltip.js';
 import '../popup/index.js';

package/es/form/index.js

@@ -150,7 +150,7 @@ import '../hooks/useCommonClassName.js';
 import '../upload/hooks/useDrag.js';
 import '../image-viewer/index.js';
 import '../image-viewer/ImageViewer.js';
-import '../_chunks/dep-51336096.js';
+import '../_chunks/dep-26aef3c9.js';
 import '../tooltip/index.js';
 import '../tooltip/Tooltip.js';
 import '../popup/index.js';

package/es/form/style/index.css

@@ -162,13 +162,13 @@
   margin: 0;
   width: 100%;
   height: auto;
-  min-height: 20px;
+  min-height: var(--td-line-height-body-small);
   font: var(--td-font-body-small);
   color: var(--td-text-color-placeholder);
 }
 .t-input__extra {
   position: absolute;
-  bottom: -20px;
+  bottom: calc(0px - var(--td-line-height-body-small));
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

package/es/form/useInitialData.js

@@ -140,7 +140,7 @@ import '../hooks/useCommonClassName.js';
 import '../upload/hooks/useDrag.js';
 import '../image-viewer/index.js';
 import '../image-viewer/ImageViewer.js';
-import '../_chunks/dep-51336096.js';
+import '../_chunks/dep-26aef3c9.js';
 import '../tooltip/index.js';
 import '../tooltip/Tooltip.js';
 import '../popup/index.js';

package/es/guide/style/index.css

@@ -26,8 +26,8 @@
 }
 .t-guide__highlight {
   z-index: 999998;
-  -webkit-transition: 0.3s ease-out;
-  transition: 0.3s ease-out;
+  -webkit-transition: 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: 0.2s cubic-bezier(0, 0, 0.15, 1);
   border-radius: var(--td-radius-default);
 }
 .t-guide__highlight--dialog {
@@ -70,7 +70,7 @@
 .t-guide__dialog {
   min-width: 320px;
   max-width: 500px;
-  padding: 24px 32px 32px;
+  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
   border-radius: var(--td-radius-large);
   background: var(--td-bg-color-container);
   -webkit-animation: tGuideDialogFadeIn 0.3s ease-out;
@@ -86,11 +86,11 @@
   font-weight: 700;
 }
 .t-guide__dialog .t-guide__desc {
-  margin-top: 12px;
+  margin-top: var(--td-comp-margin-l);
   font: var(--td-font-body-medium);
 }
 .t-guide__tooltip {
-  padding: 12px 8px;
+  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s);
   min-width: 240px;
   max-width: 600px;
   max-height: 300px;
@@ -102,7 +102,7 @@
   font-weight: 700;
 }
 .t-guide__desc {
-  margin-top: 8px;
+  margin-top: var(--td-comp-margin-s);
   text-align: left;
   color: var(--td-text-color-secondary);
   font: var(--td-font-body-small);
@@ -116,7 +116,7 @@
           align-items: center;
 }
 .t-guide__action button {
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
 }
 .t-guide__action button:last-child {
   margin-right: 0;
@@ -130,7 +130,7 @@
           align-items: center;
 }
 .t-guide__footer--popup {
-  margin-top: 16px;
+  margin-top: var(--td-comp-margin-l);
 }
 .t-guide__footer--dialog {
   margin-top: 24px;
@@ -144,7 +144,7 @@
           justify-content: center;
 }
 .t-guide__counter {
-  color: var(--td-font-gray-3);
+  color: var(--td-text-color-placeholder);
   text-align: left;
   font: var(--td-font-body-small);
   -webkit-box-flex: 1;

package/es/image-viewer/ImageViewer.js

@@ -8,7 +8,7 @@ import { _ as _slicedToArray } from '../_chunks/dep-1e7c37d1.js';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { i as isFunction_1 } from '../_chunks/dep-f04f14fc.js';
-import { I as ImageModal } from '../_chunks/dep-51336096.js';
+import { I as ImageModal } from '../_chunks/dep-26aef3c9.js';
 import { imageViewerDefaultProps } from './defaultProps.js';
 import useImageScale from './hooks/useImageScale.js';
 import useList from './hooks/useList.js';

package/es/image-viewer/ImageViewerMini.js

@@ -8,7 +8,7 @@ import '../_chunks/dep-415453d0.js';
 import 'react';
 import 'tdesign-icons-react';
 import '../dialog/index.js';
-export { b as ImageModelMini, a as ImageModelMiniContent } from '../_chunks/dep-51336096.js';
+export { b as ImageModelMini, a as ImageModelMiniContent } from '../_chunks/dep-26aef3c9.js';
 import '../hooks/useConfig.js';
 import '../hooks/useGlobalIcon.js';
 import '../dialog/Dialog.js';

package/es/image-viewer/ImageViewerModel.js

@@ -15,7 +15,7 @@ import 'classnames';
 import '../tooltip/index.js';
 import '../hooks/useConfig.js';
 import './utils.js';
-export { I as ImageModal, c as ImageModelItem, d as ImageViewerUtils } from '../_chunks/dep-51336096.js';
+export { I as ImageModal, c as ImageModelItem, d as ImageViewerUtils } from '../_chunks/dep-26aef3c9.js';
 import './hooks/useMirror.js';
 import './hooks/usePosition.js';
 import './hooks/useIndex.js';

package/es/image-viewer/index.js

@@ -16,7 +16,7 @@ import '../_chunks/dep-c9bc823c.js';
 import '../_chunks/dep-0b4df973.js';
 import '../_chunks/dep-65de5ea7.js';
 import '../_chunks/dep-51533589.js';
-import '../_chunks/dep-51336096.js';
+import '../_chunks/dep-26aef3c9.js';
 import '../_chunks/dep-fe647e5e.js';
 import '../_chunks/dep-415453d0.js';
 import '../_chunks/dep-c3ce514a.js';

package/es/index.js

@@ -561,7 +561,7 @@ import './comment/style/css.js';
 import './comment/type.js';
 import './transfer/style/css.js';
 import './transfer/type.js';
-import './_chunks/dep-8e115ca7.js';
+import './_chunks/dep-5e0eb6ae.js';
 import 'use-resize-observer';
 import './avatar/AvatarContext.js';
 import './avatar/defaultProps.js';
@@ -615,7 +615,7 @@ import './_common/js/utils/injectStyle.js';
 import './watermark/defaultProps.js';
 import './watermark/type.js';
 import './image-viewer/ImageViewer.js';
-import './_chunks/dep-51336096.js';
+import './_chunks/dep-26aef3c9.js';
 import './image-viewer/utils.js';
 import './image-viewer/hooks/useMirror.js';
 import './image-viewer/hooks/usePosition.js';

package/es/input/style/index.css

@@ -383,7 +383,7 @@
 }
 .t-input__tips {
   height: auto;
-  min-height: 20px;
+  min-height: var(--td-line-height-body-small);
   font: var(--td-font-body-small);
   position: absolute;
 }

package/es/layout/style/index.css

@@ -29,7 +29,7 @@
           flex-direction: row;
 }
 .t-layout__header {
-  height: 64px;
+  height: var(--td-comp-size-xxxl);
   background-color: var(--td-bg-color-container);
 }
 .t-layout__content {
@@ -39,8 +39,8 @@
 }
 .t-layout__sider {
   position: relative;
-  -webkit-transition: all 0.22s;
-  transition: all 0.22s;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
   background: var(--td-bg-color-container);
   width: 232px;
 }

package/es/link/style/index.css

@@ -15,28 +15,28 @@
   font: var(--td-font-link-medium);
 }
 .t-link .t-link__prefix-icon {
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
 }
 .t-link .t-link__suffix-icon {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-link.t-size-s {
   font: var(--td-font-link-small);
 }
 .t-link.t-size-s .t-link__prefix-icon {
-  margin-right: 4px;
+  margin-right: var(--td-comp-margin-xs);
 }
 .t-link.t-size-s .t-link__suffix-icon {
-  margin-left: 4px;
+  margin-left: var(--td-comp-margin-xs);
 }
 .t-link.t-size-l {
   font: var(--td-font-link-large);
 }
 .t-link.t-size-l .t-link__prefix-icon {
-  margin-right: 12px;
+  margin-right: var(--td-comp-margin-m);
 }
 .t-link.t-size-l .t-link__suffix-icon {
-  margin-left: 12px;
+  margin-left: var(--td-comp-margin-m);
 }
 .t-link--theme-default {
   color: var(--td-text-color-primary);

package/es/list/style/index.css

@@ -135,7 +135,7 @@
 .t-list__load {
   background: var(--td-bg-color-container);
   text-align: center;
-  line-height: 20px;
+  line-height: var(--td-line-height-body-small);
 }
 .t-list__load > div {
   display: -webkit-box;

package/es/menu/style/index.css

@@ -25,14 +25,14 @@ a.t-menu__item:active {
   height: 64px;
 }
 .t-head-menu__inner li + li {
-  margin-left: 4px;
+  margin-left: var(--td-comp-margin-xs);
 }
 .t-head-menu__inner .t-menu:first-child {
-  margin-left: 24px;
+  margin-left: var(--td-comp-margin-xxl);
 }
 .t-head-menu .t-menu__logo:not(:empty) {
   height: 100%;
-  margin-right: 32px;
+  margin-right: var(--td-comp-margin-xxxl);
 }
 .t-head-menu .t-menu {
   -webkit-box-flex: 1;
@@ -56,13 +56,13 @@ a.t-menu__item:active {
   height: 64px;
   line-height: 64px;
   text-align: right;
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
   overflow: hidden;
 }
 .t-head-menu .t-menu__operations-icon {
   width: 40px;
   height: 40px;
-  padding: 8px;
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
   line-height: 40px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -133,8 +133,8 @@ a.t-menu__item:active {
       -ms-flex-pack: start;
           justify-content: flex-start;
   white-space: nowrap;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: var(--td-comp-paddingLR-l);
+  padding-right: var(--td-comp-paddingLR-l);
   min-width: 100%;
   margin-left: 0;
   color: var(--td-font-gray-2);
@@ -146,10 +146,10 @@ a.t-menu__item:active {
   margin-left: 0;
 }
 .t-head-menu .t-submenu-icon {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-head-menu .t-fake-arrow {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-head-menu .t-menu__popup-inner .t-menu__popup {
   top: -8px;
@@ -252,7 +252,7 @@ a.t-menu__item:active {
   margin-right: initial;
 }
 .t-default-menu.t-is-collapsed .t-menu__popup .t-menu__item {
-  padding-left: 16px;
+  padding-left: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
@@ -322,7 +322,7 @@ a.t-menu__item:active {
   border-bottom: 1px solid var(--td-component-stroke);
 }
 .t-default-menu__inner .t-menu {
-  padding: 16px 8px;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s);
   position: relative;
   -webkit-box-flex: 1;
       -ms-flex: 1;
@@ -341,13 +341,13 @@ a.t-menu__item:active {
           box-sizing: border-box;
 }
 .t-default-menu .t-submenu {
-  margin-bottom: 4px;
+  margin-bottom: var(--td-comp-margin-xs);
   position: relative;
 }
 .t-default-menu .t-menu__operations:not(:empty) {
   width: 100%;
   position: relative;
-  padding: 8px 16px;
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
   top: 0;
   left: 0;
   text-align: left;
@@ -358,14 +358,14 @@ a.t-menu__item:active {
 .t-default-menu .t-menu__operations-icon {
   width: 32px;
   height: 32px;
-  padding: 8px;
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
   cursor: pointer;
   color: var(--td-font-gray-1);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 .t-default-menu .t-menu__item.t-is-opened {
-  margin: 4px 0;
+  margin: var(--td-comp-margin-xs) 0;
   color: var(--td-font-gray-1);
   background-color: unset;
 }
@@ -402,7 +402,7 @@ a.t-menu__item:active {
 }
 .t-default-menu .t-menu__item {
   position: relative;
-  margin: 4px 0;
+  margin: var(--td-comp-margin-xs) 0;
   padding: 0 10px 0 16px;
   height: 36px;
   line-height: 36px;
@@ -438,7 +438,7 @@ a.t-menu__item:active {
   background: var(--td-gray-color-2);
 }
 .t-default-menu .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) + .t-menu__item {
-  margin-top: 4px;
+  margin-top: var(--td-comp-margin-xs);
 }
 .t-menu {
   color: var(--td-font-gray-2);
@@ -569,7 +569,7 @@ a.t-menu__item:active {
 }
 .t-icon + .t-menu__content,
 .t-icon + .t-menu__item-link {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-menu--dark.t-head-menu {
   background-color: var(--td-gray-color-13);
@@ -656,13 +656,13 @@ a.t-menu__item:active {
   margin: 0;
 }
 .t-menu__popup-wrapper {
-  padding: 8px;
+  padding: var(--td-comp-paddingLR-s);
   height: 100%;
   list-style: none;
   margin: 0;
 }
 .t-menu__popup .t-fake-arrow {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-menu__popup.t-is-vertical {
   max-height: unset;
@@ -672,17 +672,17 @@ a.t-menu__item:active {
   width: var(--popup-width, 216px);
 }
 .t-menu__popup.t-is-vertical .t-menu__item {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: var(--td-comp-paddingLR-l);
+  padding-right: var(--td-comp-paddingLR-l);
   margin: 4px 0;
 }
 .t-menu__popup.t-is-horizontal .t-menu__item {
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: var(--td-comp-paddingLR-l);
+  padding-right: var(--td-comp-paddingLR-l);
   white-space: nowrap;
 }
 .t-menu__popup.t-is-horizontal li + li {
-  margin-top: 4px;
+  margin-top: var(--td-comp-margin-xs);
 }
 .t-menu__popup.t-is-opened {
   max-height: var(--popup-max-height, 364px);
@@ -718,7 +718,7 @@ a.t-menu__item:active {
   background-color: var(--td-gray-color-1);
 }
 .t-menu__operations-icon {
-  margin-right: 16px;
+  margin-right: var(--td-comp-margin-l);
   border-radius: var(--td-radius-default);
   color: var(--td-font-gray-2);
   -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1);

package/es/message/style/index.css

@@ -20,16 +20,16 @@
           align-items: center;
   color: var(--td-text-color-primary);
   font: var(--td-font-body-medium);
-  padding: 13px 16px;
+  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
 }
 .t-message > .t-icon,
 .t-message > [data-t-icon] > .t-icon,
 .t-message .t-loading {
   color: var(--td-brand-color);
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
   -ms-flex-negative: 0;
       flex-shrink: 0;
-  font-size: var(--td-font-size-title-large);
+  font-size: calc(var(--td-font-size-body-medium) + 6px);
 }
 .t-message.t-is-success > .t-icon,
 .t-message.t-is-success > [data-t-icon] > .t-icon,
@@ -51,12 +51,12 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   margin-right: 0;
-  margin-left: 24px;
+  margin-left: var(--td-comp-margin-xxl);
   cursor: pointer;
   color: var(--td-text-color-secondary);
 }
 .t-message.t-is-closable .t-message__close .t-icon-close {
-  font-size: var(--td-font-size-body-large);
+  font-size: calc(var(--td-font-size-body-medium) + 2px);
   border-radius: var(--td-radius-default);
   -webkit-transition: all 0.2s linear;
   transition: all 0.2s linear;
@@ -72,6 +72,6 @@
   z-index: 6000;
 }
 .t-message__list .t-message {
-  margin-bottom: 8px;
+  margin-bottom: var(--td-comp-margin-s);
   word-break: break-all;
 }