From 3cb44ddd0a03fc0ea9081631a76073a97fa53157 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Fri, 11 Oct 2024 17:50:57 +0800 Subject: [PATCH] refactor(theme): [statisic] refactor statisic theme vars --- packages/theme/src/statistic/index.less | 36 ++++++++++++------------- packages/theme/src/statistic/vars.less | 34 +++++++++++------------ 2 files changed, 33 insertions(+), 37 deletions(-) diff --git a/packages/theme/src/statistic/index.less b/packages/theme/src/statistic/index.less index 4565963629..dbfd201c98 100644 --- a/packages/theme/src/statistic/index.less +++ b/packages/theme/src/statistic/index.less @@ -4,44 +4,44 @@ @statistic-item-prefix-cls: ~'@{css-prefix}statistic'; .@{statistic-item-prefix-cls} { - .component-css-vars-statistic(); + .inject-Statistic-vars(); width: 100%; &__title { - font-size: var(--ti-statistic-font-size); - color: var(--ti-statistic-font-color); - font-weight: var(--ti-statistic-title-font-weight); - line-height: var(--ti-statistic-title-line-height); - margin-bottom: var(--ti-statistic-title-margin-bottom); + font-size: var(--tv-Statistic-font-size); + color: var(--tv-Statistic-font-color); + font-weight: var(--tv-Statistic-title-font-weight); + line-height: var(--tv-Statistic-title-line-height); + margin-bottom: var(--tv-Statistic-title-margin-bottom); } &__slots { - font-weight: var(--ti-statistic-font-weight); - font-size: var(--ti-statistic-title-font-size); - color: var(--ti-statistic-font-color); + font-weight: var(--tv-Statistic-font-weight); + font-size: var(--tv-Statistic-title-font-size); + color: var(--tv-Statistic-font-color); display: flex; align-items: baseline; } &__prefix { - font-weight: var(--ti-statistic-prefix-font-weight); - font-size: var(--ti-statistic-font-size); + font-weight: var(--tv-Statistic-prefix-font-weight); + font-size: var(--tv-Statistic-font-size); } &__description { - font-size: var(--ti-statistic-description-font-size); - font-weight: var(--ti-statistic-description-font-weight); + font-size: var(--tv-Statistic-description-font-size); + font-weight: var(--tv-Statistic-description-font-weight); } &__suffix { - margin-left: var(--ti-statistic-suffix-margin-left); - font-size: var(--ti-statistic-suffix-font-size); - font-weight: var(--ti-statistic-suffix-font-weight); + margin-left: 4px; + font-size: var(--tv-Statistic-suffix-font-size); + font-weight: var(--tv-Statistic-suffix-font-weight); } &__description-margin { - margin-bottom: var(--ti-statistic-description-margin-bottom); - margin-top: var(--ti-statistic-description-margin-top); + margin-bottom: var(--tv-Statistic-description-margin-bottom); + margin-top: -8px; } } diff --git a/packages/theme/src/statistic/vars.less b/packages/theme/src/statistic/vars.less index 69e6d86efa..0e68dc9b0f 100644 --- a/packages/theme/src/statistic/vars.less +++ b/packages/theme/src/statistic/vars.less @@ -1,34 +1,30 @@ -.component-css-vars-statistic() { +.inject-Statistic-vars() { // 标题字体大小 - --ti-statistic-font-size: var(--ti-common-font-size-base, 14px); + --tv-Statistic-font-size: var(--tv-font-size-md); // 后缀字体大小 - --ti-statistic-suffix-font-size: var(--ti-common-font-size-0, 12px); + --tv-Statistic-suffix-font-size: var(--tv-font-size-sm); // 标题内容字体大小 - --ti-statistic-title-font-size: var(--ti-common-font-size-6, 32px); + --tv-Statistic-title-font-size: var(--tv-font-size-heading-xl); // 标题字体颜色 - --ti-statistic-font-color: var(--ti-common-color-primary-normal, #191919); + --tv-Statistic-font-color: var(--tv-color-text); // 标题字体粗细 - --ti-statistic-title-font-weight: var(--ti-common-font-weight-4, normal); + --tv-Statistic-title-font-weight: var(--tv-font-weight-regular); // 标题上间距 - --ti-statistic-title-margin-top: var(--ti-common-space-5x, 20px); - // 描述上间距 - --ti-statistic-description-margin-top: -8px; + --tv-Statistic-title-margin-top: 20px; // 描述下间距 - --ti-statistic-description-margin-bottom: var(--ti-common-space-6x, 24px); + --tv-Statistic-description-margin-bottom: 24px; // 标题下间距 - --ti-statistic-title-margin-bottom: var(--ti-common-space-5x, 20px); + --tv-Statistic-title-margin-bottom: 20px; // 标题行高 - --ti-statistic-title-line-height: var(ti-common-line-height-4); + --tv-Statistic-title-line-height: var(--tv-line-height-number); // 前缀插槽字体粗细 - --ti-statistic-font-weight: var(--ti-common-font-weight-5, 500); + --tv-Statistic-font-weight: 500; // 前缀字体粗细 - --ti-statistic-prefix-font-weight: var(--ti-common-font-weight-5, 500); + --tv-Statistic-prefix-font-weight: 500; // 后缀字体粗细 - --ti-statistic-suffix-font-weight: var(--ti-common-font-weight-5, 500); + --tv-Statistic-suffix-font-weight: 500; // 数字内容字体粗细 - --ti-statistic-description-font-weight: var(--ti-common-font-weight-normal, 400); - // 后缀左边距 - --ti-statistic-suffix-margin-left: var(--ti-common-space-base, 4px); + --tv-Statistic-description-font-weight: var(--tv-font-weight-regular); // 数字内容字体 - --ti-statistic-description-font-size: var(--ti-common-font-size-5, 24px); + --tv-Statistic-description-font-size: var(--tv-font-size-heading-lg); }