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

package/dist/tdesign.css

@@ -371,9 +371,10 @@
   --td-size-14: 56px;
   --td-size-15: 64px;
   --td-size-16: 72px;
-  --td-comp-size-xxs: var(--td-size-6);
-  --td-comp-size-xs: var(--td-size-7);
-  --td-comp-size-s: var(--td-size-8);
+  --td-comp-size-xxxs: var(--td-size-6);
+  --td-comp-size-xxs: var(--td-size-7);
+  --td-comp-size-xs: var(--td-size-8);
+  --td-comp-size-s: var(--td-size-9);
   --td-comp-size-m: var(--td-size-10);
   --td-comp-size-l: var(--td-size-11);
   --td-comp-size-xl: var(--td-size-12);
@@ -442,7 +443,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 {
@@ -452,8 +453,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;
 }
@@ -2714,7 +2715,7 @@
   border-radius: var(--td-radius-medium);
   padding: 4px 8px;
   font-size: var(--td-font-size-body-medium);
-  line-height: 22px;
+  line-height: var(--td-line-height-body-medium);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   word-break: break-all;
@@ -4070,7 +4071,7 @@
   cursor: not-allowed;
 }
 .t-button.t-size-s {
-  height: var(--td-comp-size-s);
+  height: var(--td-comp-size-xs);
   font: var(--td-font-body-small);
   padding-left: calc(var(--td-comp-paddingLR-s) - 1px);
   padding-right: calc(var(--td-comp-paddingLR-s) - 1px);
@@ -4080,7 +4081,7 @@
   font-size: var(--td-font-size-body-medium);
 }
 .t-button.t-size-l {
-  height: var(--td-comp-size-l);
+  height: var(--td-comp-size-xl);
   font: var(--td-font-body-large);
   padding-left: calc(var(--td-comp-paddingLR-xl) - 1px);
   padding-right: calc(var(--td-comp-paddingLR-xl) - 1px);
@@ -4098,21 +4099,21 @@
   padding: 0;
 }
 .t-button--shape-square.t-size-s {
-  width: var(--td-comp-size-s);
+  width: var(--td-comp-size-xs);
   padding: 0;
 }
 .t-button--shape-square.t-size-l {
-  width: var(--td-comp-size-l);
+  width: var(--td-comp-size-xl);
   padding: 0;
 }
 .t-button--shape-round {
   border-radius: var(--td-radius-round);
 }
 .t-button--shape-round.t-size-s {
-  border-radius: calc(var(--td-comp-size-s) / 2);
+  border-radius: calc(var(--td-comp-size-xs) / 2);
 }
 .t-button--shape-round.t-size-l {
-  border-radius: calc(var(--td-comp-size-l) / 2);
+  border-radius: calc(var(--td-comp-size-xl) / 2);
 }
 .t-button--shape-circle {
   width: var(--td-comp-size-m);
@@ -4127,13 +4128,13 @@
   font-size: var(--td-font-size-body-large);
 }
 .t-button--shape-circle.t-size-s {
-  width: var(--td-comp-size-s);
-  border-radius: calc(var(--td-comp-size-s) / 2);
+  width: var(--td-comp-size-xs);
+  border-radius: calc(var(--td-comp-size-xs) / 2);
 }
 .t-button--shape-circle.t-size-l {
-  width: var(--td-comp-size-l);
+  width: var(--td-comp-size-xl);
   padding: 0;
-  border-radius: calc(var(--td-comp-size-l) / 2);
+  border-radius: calc(var(--td-comp-size-xl) / 2);
 }
 .t-button--ghost {
   --ripple-color: var(--td-gray-color-10);
@@ -4543,7 +4544,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;
 }
@@ -4684,7 +4685,10 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  padding: 14px 24px;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
   opacity: 1;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
@@ -4710,43 +4714,44 @@
   color: var(--td-brand-color);
 }
 .t-alert--success {
-  background-color: var(--td-success-color-2);
+  background-color: var(--td-success-color-focus);
 }
 .t-alert--success .t-alert__icon {
   color: var(--td-success-color);
 }
 .t-alert--success .t-alert__swiper-trigger-wrap {
-  color: var(--td-success-color-2);
+  color: var(--td-success-color-focus);
 }
 .t-alert--success .t-alert__swiper-trigger--active {
   color: var(--td-success-color);
 }
 .t-alert--warning {
-  background-color: var(--td-warning-color-2);
+  background-color: var(--td-warning-color-focus);
 }
 .t-alert--warning .t-alert__icon {
   color: var(--td-warning-color);
 }
 .t-alert--warning .t-alert__swiper-trigger-wrap {
-  color: var(--td-warning-color-2);
+  color: var(--td-warning-color-focus);
 }
 .t-alert--warning .t-alert__swiper-trigger--active {
   color: var(--td-warning-color);
 }
 .t-alert--error {
-  background-color: var(--td-error-color-2);
+  background-color: var(--td-error-color-focus);
 }
 .t-alert--error .t-alert__icon {
   color: var(--td-error-color);
 }
 .t-alert--error .t-alert__swiper-trigger-wrap {
-  color: var(--td-error-color-2);
+  color: var(--td-error-color-focus);
 }
 .t-alert--error .t-alert__swiper-trigger--active {
   color: var(--td-error-color);
 }
 .t-alert__icon {
-  font-size: 20px;
+  padding: calc((var(--td-line-height-body-medium) - calc(var(--td-font-size-body-medium) + 6px)) / 2) 0;
+  font-size: calc(var(--td-font-size-body-medium) + 6px);
   display: inherit;
 }
 .t-alert__icon,
@@ -4754,7 +4759,7 @@
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
-  line-height: 20px;
+  line-height: var(--td-line-height-body-small);
 }
 .t-alert__content {
   -webkit-box-flex: 1;
@@ -4775,7 +4780,7 @@
   font-weight: bold;
 }
 .t-alert__title + .t-alert__message {
-  margin-top: 8px;
+  margin-top: var(--td-comp-margin-s);
 }
 .t-alert__description {
   color: var(--td-text-color-secondary);
@@ -4789,7 +4794,7 @@
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
-  padding: 0 8px;
+  padding: 0 var(--td-comp-paddingLR-s);
   color: var(--td-brand-color);
   cursor: pointer;
   -webkit-transition: color 0.2s;
@@ -4802,16 +4807,24 @@
   color: var(--td-brand-color-active);
 }
 .t-alert__icon + .t-alert__content {
-  margin-left: 10px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-alert__collapse {
-  margin-top: 12px;
+  margin-top: var(--td-comp-margin-s);
   color: var(--td-brand-color);
   cursor: pointer;
 }
 .t-alert__close {
-  font-size: var(--td-font-size-body-medium);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: var(--td-comp-margin-l);
+  font-size: calc(var(--td-font-size-body-medium) + 2px);
   color: var(--td-text-color-secondary);
+  padding: calc((var(--td-line-height-body-medium) - calc(var(--td-font-size-body-medium) + 2px)) / 2) 0;
   cursor: pointer;
 }
 
@@ -4922,6 +4935,21 @@
       flex-wrap: wrap;
   row-gap: 4px;
 }
+.t-radio-group.t-radio-group__outline.t-size-s .t-radio-button {
+  height: 24px;
+}
+.t-radio-group.t-radio-group__outline.t-size-m .t-radio-button {
+  height: 32px;
+}
+.t-radio-group.t-radio-group__outline.t-size-l .t-radio-button {
+  height: 40px;
+}
+.t-radio-group.t-radio-group__outline .t-radio-button:first-child {
+  border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
+}
+.t-radio-group.t-radio-group__outline .t-radio-button:last-child {
+  border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
+}
 .t-radio-group.t-radio-group__outline .t-radio-button.t-is-checked {
   color: var(--td-brand-color);
 }
@@ -5009,7 +5037,7 @@
 }
 .t-radio-group.t-size-s .t-radio-button {
   height: 20px;
-  padding: 0px 4px;
+  padding: 0px 8px;
   font: var(--td-font-body-small);
 }
 .t-radio-group.t-size-s .t-radio-button::before {
@@ -5751,11 +5779,10 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   text-align: center;
   border-radius: var(--td-radius-circle);
-  margin-top: 3px;
   font-size: var(--td-font-size-body-large);
 }
 .t-steps {
@@ -5777,7 +5804,7 @@
           flex: 1;
   overflow: hidden;
   vertical-align: top;
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -5845,7 +5872,7 @@
 .t-steps .t-steps-item__icon {
   vertical-align: top;
   font-size: var(--td-font-size-body-medium);
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
   color: var(--td-text-color-placeholder);
 }
 .t-steps .t-steps-item__icon--number {
@@ -5860,11 +5887,10 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   text-align: center;
   border-radius: var(--td-radius-circle);
-  margin-top: 3px;
   font-size: var(--td-font-size-body-large);
 }
 .t-steps .t-steps-item__icon--finish {
@@ -5878,15 +5904,14 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   text-align: center;
   border-radius: var(--td-radius-circle);
-  margin-top: 3px;
   font-size: var(--td-font-size-body-large);
 }
 .t-steps .t-steps-item__icon--error {
-  border: 1px solid var(--td-error-color-6);
+  border: 1px solid var(--td-error-color);
   color: #000;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -5897,19 +5922,18 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   text-align: center;
   border-radius: var(--td-radius-circle);
-  margin-top: 3px;
   font-size: var(--td-font-size-body-large);
 }
 .t-steps .t-steps-item__icon > .t-icon {
-  font-size: 24px;
+  font-size: calc(var(--td-font-size-body-medium) + 10px);
 }
 .t-steps .t-steps-item__title {
   position: relative;
-  padding-right: 8px;
+  padding-right: var(--td-comp-margin-s);
   color: var(--td-text-color-placeholder);
   font-size: var(--td-font-size-body-large);
   line-height: 24px;
@@ -5917,7 +5941,7 @@
 .t-steps .t-steps-item__description {
   color: var(--td-text-color-placeholder);
   font-size: var(--td-font-size-body-medium);
-  margin-bottom: 4px;
+  margin-bottom: var(--td-comp-margin-xs);
   line-height: 22px;
 }
 .t-steps--line-separator .t-steps-item:before,
@@ -5930,23 +5954,18 @@
 .t-steps--dashed-separator .t-steps-item__title:after {
   border-style: dashed;
 }
-.t-steps--horizontal.t-steps--default-anchor .t-steps-item__content {
-  margin-top: 4px;
-}
 .t-steps--horizontal.t-steps--default-anchor .t-steps-item__title {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
-  margin-bottom: 4px;
+  margin-bottom: var(--td-comp-margin-xs);
 }
 .t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number {
-  width: steps-circle-width;
-  height: 24px;
-  margin-top: 4px;
+  width: 22px;
+  height: 22px;
 }
 .t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon > .t-icon {
-  font-size: 24px;
-  margin-top: 4px;
+  font-size: calc(var(--td-font-size-body-medium) + 10px);
 }
 .t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item__title:after {
   content: "";
@@ -5980,7 +5999,7 @@
       -ms-flex-align: end;
           align-items: flex-end;
   border: 0;
-  font-size: 16px;
+  font-size: var(--td-font-size-body-large);
   color: var(--td-text-color-placeholder);
 }
 .t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
@@ -6023,7 +6042,7 @@
       -ms-flex-align: end;
           align-items: flex-end;
   border: 0;
-  font-size: 16px;
+  font-size: var(--td-font-size-body-large);
   color: var(--td-text-color-placeholder);
 }
 .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
@@ -6053,7 +6072,7 @@
 }
 .t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item__title {
   padding-right: 0;
-  margin-bottom: 4px;
+  margin-bottom: var(--td-comp-margin-xs);
 }
 .t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon {
   border-color: var(--td-brand-color);
@@ -6084,7 +6103,7 @@
   height: 8px;
   border: 2px solid var(--td-text-color-placeholder);
   border-radius: var(--td-radius-circle);
-  margin-bottom: 4px;
+  margin-bottom: var(--td-comp-margin-xs);
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -6110,7 +6129,7 @@
       -ms-flex-align: start;
           align-items: flex-start;
   border: 0;
-  font-size: 16px;
+  font-size: var(--td-font-size-body-large);
   -webkit-transform: rotateZ(90deg);
           transform: rotateZ(90deg);
   color: var(--td-text-color-placeholder);
@@ -6150,7 +6169,7 @@
       -ms-flex-align: start;
           align-items: flex-start;
   border: 0;
-  font-size: 16px;
+  font-size: var(--td-font-size-body-large);
   -webkit-transform: rotateZ(90deg);
           transform: rotateZ(90deg);
   color: var(--td-text-color-placeholder);
@@ -6211,7 +6230,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 16px;
+  font-size: var(--td-font-size-body-large);
   -webkit-transform: rotateZ(180deg);
           transform: rotateZ(180deg);
   color: var(--td-text-color-placeholder);
@@ -6220,7 +6239,7 @@
   color: var(--td-brand-color);
 }
 .t-steps--vertical.t-steps--positive .t-steps-item {
-  padding-bottom: 24px;
+  padding-bottom: var(--td-comp-margin-xxl);
   margin-bottom: 5px;
 }
 .t-steps--vertical.t-steps--positive .t-steps-item:not(:last-child)::before {
@@ -6241,11 +6260,11 @@
   color: var(--td-brand-color);
 }
 .t-steps--vertical.t-steps--default-anchor .t-steps-item__content {
-  margin-top: 2px;
+  margin-top: var(--td-comp-margin-xxs);
   margin-left: 0px;
 }
 .t-steps--vertical.t-steps--default-anchor .t-steps-item__title {
-  margin-bottom: 4px;
+  margin-bottom: var(--td-comp-margin-xs);
 }
 .t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
   content: "^";
@@ -6260,7 +6279,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 14px;
+  font-size: var(--td-font-size-body-medium);
   color: var(--td-text-color-placeholder);
 }
 .t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
@@ -6303,7 +6322,7 @@
   height: 8px;
   border: 2px solid var(--td-text-color-placeholder);
   border-radius: var(--td-radius-circle);
-  margin-bottom: 4px;
+  margin-bottom: var(--td-comp-margin-xs);
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -6324,7 +6343,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 16px;
+  font-size: var(--td-font-size-body-large);
   -webkit-transform: rotateZ(180deg);
           transform: rotateZ(180deg);
   color: var(--td-text-color-placeholder);
@@ -6335,14 +6354,14 @@
 .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
   -webkit-transform: rotateZ(0);
           transform: rotateZ(0);
-  margin-top: 4px;
+  margin-top: var(--td-comp-margin-xs);
 }
 .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before,
 .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
   color: var(--td-brand-color);
 }
 .t-steps--vertical.t-steps--reverse .t-steps-item {
-  padding-bottom: 24px;
+  padding-bottom: var(--td-comp-margin-xxl);
   margin-bottom: 5px;
 }
 .t-steps--vertical.t-steps--reverse .t-steps-item:not(:last-child)::before {
@@ -6376,7 +6395,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 14px;
+  font-size: var(--td-font-size-body-medium);
   color: var(--td-text-color-placeholder);
 }
 .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
@@ -6433,16 +6452,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,
@@ -6464,12 +6483,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;
@@ -6485,7 +6504,7 @@
   z-index: 6000;
 }
 .t-message__list .t-message {
-  margin-bottom: 8px;
+  margin-bottom: var(--td-comp-margin-s);
   word-break: break-all;
 }
 
@@ -6891,12 +6910,15 @@ a .t-tag:active {
   margin-left: 4px;
 }
 .t-tag-input .t-input {
-  padding-left: 4px;
   overflow: hidden;
   min-height: 32px;
+  padding: 4px;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
 }
 .t-tag-input .t-input.t-size-s {
-  padding-left: 2px;
+  padding: 2px;
   min-height: 24px;
 }
 .t-tag-input .t-input.t-size-l {
@@ -6917,14 +6939,11 @@ a .t-tag:active {
   cursor: pointer;
 }
 .t-tag-input--break-line .t-input {
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
+  display: block;
   padding-right: 24px;
 }
 .t-tag-input--break-line .t-input.t-input--prefix > .t-input__prefix {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: inline;
   text-align: left;
 }
 .t-tag-input--break-line .t-input .t-input__suffix-icon {
@@ -7464,8 +7483,8 @@ ul.t-select-option-group__header,
 .t-pagination__select {
   -ms-flex-negative: 0;
       flex-shrink: 0;
-  margin-right: 16px;
-  height: 32px;
+  margin-right: var(--td-comp-margin-l);
+  height: var(--td-comp-size-m);
   font-size: var(--td-font-size-body-medium);
   color: var(--td-text-color-secondary);
 }
@@ -7485,9 +7504,9 @@ ul.t-select-option-group__header,
   color: var(--td-text-color-secondary);
   border-radius: var(--td-radius-default);
   font: var(--td-font-body-large);
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
+  width: var(--td-comp-size-m);
+  height: var(--td-comp-size-m);
+  line-height: var(--td-comp-size-m);
 }
 .t-pagination__btn:hover {
   background-color: var(--td-bg-color-secondarycontainer-hover);
@@ -7507,10 +7526,10 @@ ul.t-select-option-group__header,
   cursor: not-allowed;
 }
 .t-pagination__btn-prev {
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
 }
 .t-pagination__btn-next {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-pagination__btn + .t-pagination__select {
   margin-right: 0;
@@ -7527,7 +7546,7 @@ ul.t-select-option-group__header,
   margin: 0;
 }
 .t-pagination__pager li:not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
 }
 .t-pagination__number {
   display: inline-block;
@@ -7538,12 +7557,12 @@ ul.t-select-option-group__header,
   background-color: var(--td-bg-color-container);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  height: 32px;
-  min-width: 32px;
-  line-height: 30px;
+  height: var(--td-comp-size-m);
+  min-width: var(--td-comp-size-m);
+  line-height: calc(var(--td-comp-size-m) - 2px);
   font-size: var(--td-font-body-medium);
-  padding-left: 4px;
-  padding-right: 4px;
+  padding-left: var(--td-comp-paddingLR-xs);
+  padding-right: var(--td-comp-paddingLR-xs);
 }
 .t-pagination__number:hover {
   color: var(--td-brand-color-hover);
@@ -7612,7 +7631,7 @@ ul.t-select-option-group__header,
           align-items: center;
   -ms-flex-negative: 0;
       flex-shrink: 0;
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
   font-size: var(--td-font-body-medium);
   gap: 4px;
 }
@@ -7623,17 +7642,17 @@ ul.t-select-option-group__header,
   font: var(--td-font-body-small);
 }
 .t-pagination.t-size-s .t-pagination__select {
-  height: 24px;
+  height: var(--td-comp-size-xs);
   font-size: var(--td-font-size-body-small);
 }
 .t-pagination.t-size-s .t-pagination__number {
   border: 0 none;
-  height: 24px;
-  min-width: 24px;
-  line-height: 24px;
+  height: var(--td-comp-size-xs);
+  min-width: var(--td-comp-size-xs);
+  line-height: var(--td-comp-size-xs);
   font-size: var(--td-font-body-small);
-  padding-left: 2px;
-  padding-right: 2px;
+  padding-left: var(--td-comp-paddingLR-xxs);
+  padding-right: var(--td-comp-paddingLR-xxs);
 }
 .t-pagination.t-size-s .t-pagination__number:hover:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) {
   color: var(--td-text-color-primary);
@@ -7657,9 +7676,9 @@ ul.t-select-option-group__header,
 .t-pagination.t-size-s .t-pagination__btn {
   border: 0 none;
   background: none;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
+  width: var(--td-comp-size-xs);
+  height: var(--td-comp-size-xs);
+  line-height: var(--td-comp-size-xs);
 }
 .t-pagination.t-size-s .t-pagination__btn:hover {
   background-color: var(--td-bg-color-secondarycontainer-hover);
@@ -8836,7 +8855,7 @@ ul.t-select-option-group__header,
 .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;
@@ -8934,12 +8953,12 @@ ul.t-select-option-group__header,
   background-color: var(--td-bg-color-secondarycontainer-hover);
 }
 .t-tabs__btn.t-size-m {
-  height: 48px;
-  line-height: 48px;
+  height: var(--td-comp-size-xxl);
+  line-height: var(--td-comp-size-xxl);
 }
 .t-tabs__btn.t-size-l {
-  height: 64px;
-  line-height: 64px;
+  height: var(--td-comp-size-xxxxl);
+  line-height: var(--td-comp-size-xxxxl);
 }
 .t-tabs__btn--left {
   border-right: 1px solid var(--td-component-stroke);
@@ -9026,12 +9045,12 @@ ul.t-select-option-group__header,
   font: var(--td-font-body-large);
 }
 .t-tabs__scroll-btn.t-size-m {
-  height: 48px;
-  line-height: 48px;
+  height: var(--td-comp-size-xxl);
+  line-height: var(--td-comp-size-xxl);
 }
 .t-tabs__scroll-btn.t-size-l {
-  height: 64px;
-  line-height: 64px;
+  height: var(--td-comp-size-xxxxl);
+  line-height: var(--td-comp-size-xxxxl);
 }
 .t-tabs__nav-scroll {
   position: relative;
@@ -9154,12 +9173,12 @@ ul.t-select-option-group__header,
           align-items: center;
 }
 .t-tabs__nav-item.t-size-m {
-  height: 48px;
-  line-height: 48px;
+  height: var(--td-comp-size-xxl);
+  line-height: var(--td-comp-size-xxl);
 }
 .t-tabs__nav-item.t-size-l {
-  height: 64px;
-  line-height: 64px;
+  height: var(--td-comp-size-xxxxl);
+  line-height: var(--td-comp-size-xxxxl);
 }
 .t-tabs__nav-item.t-is-active {
   color: var(--td-brand-color);
@@ -9233,16 +9252,16 @@ ul.t-select-option-group__header,
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   border-radius: var(--td-radius-medium);
-  width: 400px;
-  padding: 20px 24px 24px 24px;
+  width: 360px;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
 }
 .t-notification__icon {
-  width: 24px;
+  width: calc(var(--td-font-size-body-large) + 8px);
   text-align: center;
-  margin-right: 8px;
+  margin-right: var(--td-comp-margin-s);
 }
 .t-notification__icon .t-icon {
-  font-size: 24px;
+  font-size: calc(var(--td-font-size-body-large) + 8px);
 }
 .t-notification .t-icon.t-is-info {
   color: var(--td-brand-color);
@@ -9288,10 +9307,9 @@ ul.t-select-option-group__header,
 .t-notification__content {
   font: var(--td-font-body-medium);
   color: var(--td-text-color-secondary);
-  margin-top: 8px;
+  margin-top: var(--td-comp-margin-s);
   max-height: 66px;
   overflow: hidden;
-  padding-right: 5px;
   text-overflow: ellipsis;
   word-break: break-all;
   /* stylelint-disable-next-line */
@@ -9301,27 +9319,23 @@ ul.t-select-option-group__header,
   -webkit-box-orient: vertical;
 }
 .t-notification__detail {
-  margin-top: 21px;
+  margin-top: var(--td-comp-margin-l);
   text-align: right;
   font: var(--td-font-body-medium);
 }
 .t-notification__detail-item {
-  padding: 5px 16px;
-  color: inherit;
   cursor: pointer;
 }
 .t-notification__detail-item:hover {
   color: inherit;
   background: var(--td-bg-color-container-hover);
-  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-medium);
 }
 .t-notification__detail-item + .t-notification__detail-item {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-notification__detail-item.t-is-active {
   color: var(--td-brand-color);
@@ -9511,14 +9525,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;
@@ -9542,13 +9556,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;
@@ -9619,8 +9633,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);
@@ -9632,10 +9646,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;
@@ -9738,7 +9752,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;
@@ -9808,7 +9822,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;
@@ -9827,13 +9841,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;
@@ -9844,14 +9858,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;
 }
@@ -9888,7 +9902,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;
@@ -9924,7 +9938,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);
@@ -10055,7 +10069,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);
@@ -10142,13 +10156,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;
@@ -10158,17 +10172,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);
@@ -10204,7 +10218,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);
@@ -10515,7 +10529,7 @@ a.t-menu__item:active {
   width: 100%;
 }
 .t-dialog__header .t-icon:not(.t-icon-close) {
-  font-size: var(--td-comp-size-s);
+  font-size: calc(var(--td-font-size-body-large) + 8px);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -10593,13 +10607,13 @@ a.t-menu__item:active {
   padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
 }
 .t-dialog__close {
-  font-size: var(--td-comp-size-xs);
+  font-size: calc(var(--td-font-size-body-large) + 4px);
   color: var(--td-text-color-secondary);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  width: var(--td-comp-size-xs);
-  height: var(--td-comp-size-xs);
+  width: calc(var(--td-font-size-body-large) + 4px);
+  height: calc(var(--td-font-size-body-large) + 4px);
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -10801,7 +10815,7 @@ a.t-menu__item:active {
   display: flex;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
-  padding: 4px 0 4px calc(24px * var(--level) + 8px);
+  padding: var(--td-comp-paddingTB-xs) 0 var(--td-comp-paddingTB-xs) calc(var(--td-comp-margin-xxl) * var(--level));
   cursor: default;
   -webkit-transform: translateZ(0);
           transform: translateZ(0);
@@ -10809,14 +10823,13 @@ a.t-menu__item:active {
           backface-visibility: hidden;
   -webkit-perspective: 1000;
           perspective: 1000;
-  line-height: 22px;
 }
 .t-tree__item .t-icon,
 .t-tree__item .t-loading {
   display: inline-block;
   position: relative;
   z-index: 2;
-  font-size: var(--td-font-size-body-large);
+  font-size: calc(var(--td-font-size-body-medium) + 2px);
 }
 .t-tree__item .t-icon {
   color: var(--td-text-color-secondary);
@@ -10865,12 +10878,12 @@ a.t-menu__item:active {
   background-clip: content-box;
 }
 .t-tree__item--tip-top::before {
-  background-color: var(--td-brand-color-6);
+  background-color: var(--td-brand-color);
 }
 .t-tree__item--tip-bottom::before {
   top: unset;
   bottom: -2px;
-  background-color: var(--td-brand-color-6);
+  background-color: var(--td-brand-color);
 }
 .t-tree__item--tip-highlight {
   background-color: var(--td-brand-color-light);
@@ -10887,13 +10900,13 @@ a.t-menu__item:active {
 .t-tree__line {
   --level: 0;
   --color: var(--td-border-level-1-color);
-  --space: 24px;
+  --space: var(--td-comp-margin-xxl);
   --iconSize: 16px;
   position: absolute;
-  left: calc(24px * var(--level) - 8px);
-  bottom: 17px;
+  left: calc(var(--td-comp-margin-xxl) * var(--level) - var(--td-comp-margin-l));
+  bottom: var(--td-comp-margin-l);
   width: 1px;
-  height: 34px;
+  height: 100%;
   pointer-events: none;
 }
 .t-tree__line::before {
@@ -10902,16 +10915,16 @@ a.t-menu__item:active {
   bottom: 0;
   left: 0;
   display: block;
-  height: 34px;
-  width: 12px;
+  height: 100%;
+  width: var(--td-comp-margin-m);
   border-left: 1px solid var(--color);
   border-bottom: 1px solid var(--color);
 }
 .t-tree__line--first::before {
-  height: 22px;
+  height: var(--td-line-height-body-medium);
 }
 .t-tree__line--leaf::before {
-  width: 12px;
+  width: var(--td-comp-margin-m);
 }
 .t-tree__icon {
   position: relative;
@@ -10925,7 +10938,7 @@ a.t-menu__item:active {
       -ms-flex-align: center;
           align-items: center;
   text-align: center;
-  width: 16px;
+  width: calc(var(--td-font-size-body-medium) + 2px);
   font-size: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -10941,14 +10954,17 @@ a.t-menu__item:active {
   content: "";
   display: block;
   position: absolute;
-  left: 0;
-  top: 5px;
-  width: 16px;
-  height: 16px;
+  left: calc((calc(var(--td-font-size-body-medium) + 2px) - calc(var(--td-font-size-body-medium) + 6px)) / 2);
+  width: calc(var(--td-font-size-body-medium) + 6px);
+  height: calc(var(--td-font-size-body-medium) + 6px);
   border-radius: var(--td-radius-default);
+  -webkit-transition: 0.2s linear;
+  transition: 0.2s linear;
 }
 .t-tree__icon:not(:empty):hover::after {
   background-color: var(--td-bg-color-container-hover);
+  -webkit-transition: 0.2s linear;
+  transition: 0.2s linear;
 }
 .t-tree__icon:empty {
   cursor: initial;
@@ -10960,8 +10976,8 @@ a.t-menu__item:active {
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
-  padding: 2px 4px;
-  margin-left: 4px;
+  padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xs);
+  margin-left: var(--td-comp-margin-xs);
   border-radius: var(--td-radius-default);
   cursor: pointer;
   -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1);
@@ -11077,11 +11093,11 @@ a.t-menu__item:active {
   }
   50% {
     opacity: 0;
-    max-height: calc(34px * var(--hscale) + 0px);
+    max-height: calc(100% * var(--hscale) + 0px);
   }
   100% {
     opacity: 1;
-    max-height: calc(34px * var(--hscale) + 0px);
+    max-height: calc(100% * var(--hscale) + 0px);
   }
 }
 @keyframes t-tree-toggle {
@@ -11091,11 +11107,11 @@ a.t-menu__item:active {
   }
   50% {
     opacity: 0;
-    max-height: calc(34px * var(--hscale) + 0px);
+    max-height: calc(100% * var(--hscale) + 0px);
   }
   100% {
     opacity: 1;
-    max-height: calc(34px * var(--hscale) + 0px);
+    max-height: calc(100% * var(--hscale) + 0px);
   }
 }
 .t-tree-select.t-single-suffix {
@@ -11143,7 +11159,7 @@ a.t-menu__item:active {
   padding: 0;
   list-style: none;
   font: var(--td-font-body-medium);
-  margin: 24px 0;
+  margin: var(--td-comp-margin-xxl) 0;
   border-top: 1px solid var(--td-border-level-1-color);
   color: var(--td-text-color-primary);
   -webkit-box-sizing: border-box;
@@ -11161,7 +11177,7 @@ a.t-menu__item:active {
 .t-divider--vertical {
   border-top: 0;
   display: inline-block;
-  margin: 0 12px;
+  margin: 0 var(--td-comp-margin-m);
   border-left: 1px solid var(--td-border-level-1-color);
   height: 0.9em;
   vertical-align: middle;
@@ -11418,7 +11434,6 @@ a.t-menu__item:active {
 }
 
 .t-anchor {
-  font: var(--td-font-body-medium);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   margin: 0;
@@ -11428,7 +11443,7 @@ a.t-menu__item:active {
   background: var(--td-bg-color-container);
   width: 200px;
   color: var(--td-text-color-primary);
-  font-size: var(--td-font-size-body-medium);
+  font: var(--td-font-body-medium);
 }
 .t-anchor .t-is-active > a {
   color: var(--td-brand-color);
@@ -11456,7 +11471,7 @@ a.t-menu__item:active {
   background-color: var(--td-brand-color);
 }
 .t-anchor__item {
-  padding: 0 8px 0 16px;
+  padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -11469,23 +11484,18 @@ a.t-menu__item:active {
   font-weight: 500;
 }
 .t-anchor__item .t-anchor__item {
-  padding: 0 8px 0 16px;
+  padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l);
 }
 .t-anchor__item-link {
   display: inline-block;
   position: relative;
-  line-height: 22px;
-  max-height: 72px;
   overflow: hidden;
   word-break: break-all;
   color: var(--td-text-color-primary);
   text-decoration: none;
   text-align: justify;
-  margin-right: -4px;
-  padding-right: 10px;
 }
 .t-anchor a {
-  line-height: 24px;
   -webkit-transition: color 0.2s linear;
   transition: color 0.2s linear;
 }
@@ -11504,8 +11514,7 @@ a.t-menu__item:active {
 }
 .t-anchor__target {
   cursor: pointer;
-  font-size: var(--td-font-size-body-medium);
-  line-height: 24px;
+  font: var(--td-font-body-medium);
   color: var(--td-text-color-primary);
 }
 @-webkit-keyframes fadeOut {
@@ -11528,7 +11537,7 @@ a.t-menu__item:active {
 }
 .t-anchor__target .t-anchor__copy {
   display: none;
-  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--td-comp-margin-xs);
 }
 .t-anchor__target:hover .t-anchor__copy {
   display: inline-block;
@@ -11908,28 +11917,28 @@ a.t-menu__item:active {
   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);
@@ -13535,13 +13544,13 @@ a.t-menu__item:active {
   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;
@@ -13778,8 +13787,14 @@ a.t-menu__item:active {
           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);
@@ -13788,7 +13803,7 @@ a.t-menu__item:active {
           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;
@@ -13796,8 +13811,7 @@ a.t-menu__item:active {
 }
 .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);
@@ -13805,7 +13819,7 @@ a.t-menu__item:active {
           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;
@@ -13821,10 +13835,10 @@ a.t-menu__item:active {
   -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);
@@ -13839,7 +13853,7 @@ a.t-menu__item:active {
   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 {
@@ -14047,7 +14061,7 @@ a.t-menu__item:active {
 }
 .t-popconfirm__content {
   position: relative;
-  padding: 16px;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
   border-radius: var(--td-radius-medium);
 }
 .t-popconfirm__body {
@@ -14061,19 +14075,19 @@ a.t-menu__item:active {
 }
 .t-popconfirm__body > .t-icon {
   display: inline-block;
-  margin: 1px 8px 1px 0;
-  font-size: var(--td-font-size-title-large);
+  margin-right: var(--td-comp-margin-s);
+  padding: calc((var(--td-line-height-body-medium) - calc(var(--td-font-size-body-medium) + 6px)) / 2) 0;
+  font-size: calc(var(--td-font-size-body-medium) + 6px);
 }
 .t-popconfirm__confirm {
-  margin-left: 8px;
+  margin-left: var(--td-comp-margin-s);
 }
 .t-popconfirm__inner {
   display: inline-block;
   vertical-align: top;
-  max-width: 300px;
+  max-width: 320px;
   font: var(--td-font-title-small);
   color: var(--td-text-color-primary);
-  margin-right: 8px;
 }
 .t-popconfirm__icon--warning {
   color: var(--td-warning-color);
@@ -14086,7 +14100,7 @@ a.t-menu__item:active {
 }
 .t-popconfirm__buttons {
   text-align: right;
-  margin-top: 16px;
+  margin-top: var(--td-comp-margin-l);
 }
 .t-popconfirm__buttons > span:last-child {
   margin-right: 0;
@@ -14251,7 +14265,7 @@ a.t-menu__item:active {
           align-items: center;
 }
 .t-breadcrumb__separator {
-  margin: 0 4px;
+  margin: 0 var(--td-comp-margin-xs);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -14306,14 +14320,14 @@ a.t-menu__item:active {
           animation: none;
 }
 .t-breadcrumb__item--arrow {
-  margin: 0 4px;
+  margin: 0 var(--td-comp-margin-xs);
   line-height: 0;
   color: var(--td-text-color-placeholder);
   display: inline-block;
   vertical-align: middle;
 }
 .t-breadcrumb__item--slash {
-  margin: 0 4px;
+  margin: 0 var(--td-comp-margin-xs);
   line-height: 0;
   color: var(--td-text-color-placeholder);
   display: inline-block;
@@ -14326,7 +14340,7 @@ a.t-menu__item:active {
   vertical-align: middle;
 }
 .t-breadcrumb__inner .t-icon {
-  margin: 0 4px;
+  margin: 0 var(--td-comp-margin-xs);
 }
 .t-breadcrumb__select {
   position: relative;
@@ -14461,7 +14475,7 @@ a.t-menu__item:active {
       -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;
@@ -14481,12 +14495,12 @@ a.t-menu__item:active {
   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;
@@ -14497,7 +14511,7 @@ a.t-menu__item:active {
   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);
@@ -14507,7 +14521,7 @@ a.t-menu__item:active {
   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 {
@@ -14523,7 +14537,7 @@ a.t-menu__item:active {
   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);
@@ -14537,7 +14551,7 @@ a.t-menu__item:active {
   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);
@@ -14557,7 +14571,8 @@ a.t-menu__item:active {
   -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 {
@@ -14565,7 +14580,7 @@ a.t-menu__item:active {
   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 {
@@ -16497,9 +16512,9 @@ a.t-menu__item:active {
           transform: translateX(-50%);
   top: auto;
   right: auto;
-  bottom: -34px;
-  height: 22px;
-  line-height: 22px;
+  bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px));
+  height: var(--td-line-height-body-medium);
+  line-height: var(--td-line-height-body-medium);
 }
 .t-swiper__navigation--fraction .t-swiper__arrow-left {
   display: -webkit-box;
@@ -16514,8 +16529,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 22px;
-  height: 22px;
+  width: var(--td-line-height-body-medium);
+  height: var(--td-line-height-body-medium);
   cursor: pointer;
 }
 .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
@@ -16537,8 +16552,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 22px;
-  height: 22px;
+  width: var(--td-line-height-body-medium);
+  height: var(--td-line-height-body-medium);
   cursor: pointer;
 }
 .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
@@ -16678,9 +16693,9 @@ a.t-menu__item:active {
           transform: translateX(-50%);
   top: auto;
   right: auto;
-  bottom: -34px;
-  height: 22px;
-  line-height: 22px;
+  bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px));
+  height: var(--td-line-height-body-medium);
+  line-height: var(--td-line-height-body-medium);
 }
 .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left {
   display: -webkit-box;
@@ -16695,8 +16710,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 22px;
-  height: 22px;
+  width: var(--td-line-height-body-medium);
+  height: var(--td-line-height-body-medium);
   cursor: pointer;
 }
 .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
@@ -16718,8 +16733,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 22px;
-  height: 22px;
+  width: var(--td-line-height-body-medium);
+  height: var(--td-line-height-body-medium);
   cursor: pointer;
 }
 .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
@@ -16757,9 +16772,9 @@ a.t-menu__item:active {
           transform: translateX(-50%);
   top: auto;
   right: auto;
-  bottom: -34px;
-  height: 22px;
-  line-height: 22px;
+  bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px));
+  height: var(--td-line-height-body-medium);
+  line-height: var(--td-line-height-body-medium);
 }
 .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left {
   display: -webkit-box;
@@ -16774,8 +16789,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 22px;
-  height: 22px;
+  width: var(--td-line-height-body-medium);
+  height: var(--td-line-height-body-medium);
   cursor: pointer;
 }
 .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
@@ -16797,8 +16812,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 22px;
-  height: 22px;
+  width: var(--td-line-height-body-medium);
+  height: var(--td-line-height-body-medium);
   cursor: pointer;
 }
 .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
@@ -16835,9 +16850,9 @@ a.t-menu__item:active {
           transform: translateX(-50%);
   top: auto;
   right: auto;
-  bottom: -34px;
-  height: 22px;
-  line-height: 22px;
+  bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px));
+  height: var(--td-line-height-body-medium);
+  line-height: var(--td-line-height-body-medium);
 }
 .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left {
   display: -webkit-box;
@@ -16852,8 +16867,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 22px;
-  height: 22px;
+  width: var(--td-line-height-body-medium);
+  height: var(--td-line-height-body-medium);
   cursor: pointer;
 }
 .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
@@ -16875,8 +16890,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 22px;
-  height: 22px;
+  width: var(--td-line-height-body-medium);
+  height: var(--td-line-height-body-medium);
   cursor: pointer;
 }
 .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
@@ -16940,9 +16955,9 @@ a.t-menu__item:active {
           transform: translateX(-50%);
   top: auto;
   right: auto;
-  bottom: -36px;
-  height: 24px;
-  line-height: 24px;
+  bottom: calc(0px - calc(var(--td-line-height-body-large) + 12px));
+  height: var(--td-line-height-body-large);
+  line-height: var(--td-line-height-body-large);
 }
 .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left {
   display: -webkit-box;
@@ -16957,8 +16972,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 24px;
-  height: 24px;
+  width: var(--td-line-height-body-large);
+  height: var(--td-line-height-body-large);
   cursor: pointer;
 }
 .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
@@ -16980,8 +16995,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 24px;
-  height: 24px;
+  width: var(--td-line-height-body-large);
+  height: var(--td-line-height-body-large);
   cursor: pointer;
 }
 .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
@@ -17104,9 +17119,9 @@ a.t-menu__item:active {
           transform: translateX(-50%);
   top: auto;
   right: auto;
-  bottom: -32px;
-  height: 20px;
-  line-height: 20px;
+  bottom: calc(0px - calc(var(--td-line-height-body-small) + 12px));
+  height: var(--td-line-height-body-small);
+  line-height: var(--td-line-height-body-small);
 }
 .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left {
   display: -webkit-box;
@@ -17121,8 +17136,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 20px;
-  height: 20px;
+  width: var(--td-line-height-body-small);
+  height: var(--td-line-height-body-small);
   cursor: pointer;
 }
 .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
@@ -17144,8 +17159,8 @@ a.t-menu__item:active {
   z-index: 2;
   background-color: transparent;
   color: var(--td-font-gray-4);
-  width: 20px;
-  height: 20px;
+  width: var(--td-line-height-body-small);
+  height: var(--td-line-height-body-small);
   cursor: pointer;
 }
 .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
@@ -19252,6 +19267,9 @@ a.t-menu__item:active {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .t-rate .t-rate__star-top {
   position: absolute;
@@ -19293,10 +19311,8 @@ a.t-menu__item:active {
 }
 .t-rate__text {
   color: var(--td-text-color-primary);
-  font-size: var(--td-font-size-body-medium);
-  margin-left: 16px;
-  font-weight: 700;
-  line-height: 22px;
+  font: var(--td-font-mark-medium);
+  margin-left: var(--td-comp-margin-l);
 }
 
 .t-guide {
@@ -19327,8 +19343,8 @@ a.t-menu__item:active {
 }
 .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 {
@@ -19371,7 +19387,7 @@ a.t-menu__item:active {
 .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;
@@ -19387,11 +19403,11 @@ a.t-menu__item:active {
   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;
@@ -19403,7 +19419,7 @@ a.t-menu__item:active {
   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);
@@ -19417,7 +19433,7 @@ a.t-menu__item:active {
           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;
@@ -19431,7 +19447,7 @@ a.t-menu__item:active {
           align-items: center;
 }
 .t-guide__footer--popup {
-  margin-top: 16px;
+  margin-top: var(--td-comp-margin-l);
 }
 .t-guide__footer--dialog {
   margin-top: 24px;
@@ -19445,7 +19461,7 @@ a.t-menu__item:active {
           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;