Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(theme): [loading] refactor loading theme vars #2277

Merged
merged 1 commit into from
Oct 17, 2024
Merged

refactor(theme): [loading] refactor loading theme vars #2277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 18 additions & 24 deletions packages/theme/src/loading/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@
@loading-prefix-cls: ~'@{css-prefix}loading';

.@{loading-prefix-cls} {
.component-css-vars-loading();
.inject-Loading-vars();

&__mask {
position: absolute;
z-index: 2000;
background-color: var(--ti-loading-mask-bg-color);
background-color: var(--tv-Loading-mask-bg-color);
margin: 0;
top: 0;
right: 0;
Expand All @@ -37,22 +37,22 @@

&-small {
svg {
height: var(--ti-loading-fullscreen-small-height);
width: var(--ti-loading-fullscreen-small-width);
height: var(--tv-Loading-fullscreen-small-height);
width: var(--tv-Loading-fullscreen-small-width);
}
}

&-medium {
svg {
height: var(--ti-loading-fullscreen-medium-height);
width: var(--ti-loading-fullscreen-medium-width);
height: var(--tv-Loading-fullscreen-medium-height);
width: var(--tv-Loading-fullscreen-medium-width);
}
}

&-large {
svg {
height: var(--ti-loading-fullscreen-large-height);
width: var(--ti-loading-fullscreen-large-width);
height: var(--tv-Loading-fullscreen-large-height);
width: var(--tv-Loading-fullscreen-large-width);
}
}
}
Expand All @@ -67,37 +67,37 @@
position: absolute;

.@{loading-prefix-cls}__text {
color: var(--ti-loading-text-color);
margin: var(--ti-loading-text-margin-vertical) var(--ti-loading-text-margin-horizontal);
font-size: var(--ti-loading-text-font-size);
color: var(--tv-Loading-text-color);
margin: var(--tv-Loading-text-margin-y) var(--tv-Loading-text-margin-x);
font-size: var(--tv-Loading-text-font-size);
}

&-small {
svg,
img {
height: var(--ti-loading-spinner-small-height);
width: var(--ti-loading-spinner-small-width);
height: var(--tv-Loading-spinner-small-height);
width: var(--tv-Loading-spinner-small-width);
}
}

&-medium {
svg,
img {
height: var(--ti-loading-spinner-medium-height);
width: var(--ti-loading-spinner-medium-width);
height: var(--tv-Loading-spinner-medium-height);
width: var(--tv-Loading-spinner-medium-width);
}
}

&-large {
svg,
img {
height: var(--ti-loading-spinner-large-height);
width: var(--ti-loading-spinner-large-width);
height: var(--tv-Loading-spinner-large-height);
width: var(--tv-Loading-spinner-large-width);
}
}

svg {
fill: var(--ti-loading-icon-color);
fill: var(--tv-Loading-icon-color);
}
}

Expand All @@ -114,9 +114,3 @@
opacity: 0;
}
}

.@{css-prefix-iconfont}-loading {
font-size: var(--ti-common-font-size-1);
line-height: 1;
vertical-align: text-top;
}
44 changes: 23 additions & 21 deletions packages/theme/src/loading/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,43 +10,45 @@
*
*/

.component-css-vars-loading() {
.inject-Loading-vars() {
// 加载图标色
--ti-loading-icon-color: var(--ti-common-color-icon-active, #191919);
--tv-Loading-icon-color: var(--tv-color-icon-active);
// 加载文本色
--ti-loading-text-color: var(--ti-common-color-text-secondary, #595959);
--tv-Loading-text-color: var(--tv-color-text-secondary);
// 加载背景色
--ti-loading-mask-bg-color: #f5f5f5;
--tv-Loading-mask-bg-color: var(--tv-color-bg);
// 加载文本字号
--ti-loading-text-font-size: var(--ti-common-font-size-2, 16px);
// 加载图标自定义加载图标顶部外边距
--ti-loading-spinner-margin-top: calc(var(--ti-common-space-0, 0px) - 21px);
--tv-Loading-text-font-size: var(--tv-font-size-lg);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Variable --tv-font-size-lg is not defined. Please define it or revert to using the previous variable with a fallback value.

🔗 Analysis chain

Approve font size change with a verification suggestion.

The variable renaming and value update improve consistency with the new naming scheme and use a more semantic font size variable. This change enhances maintainability.

Please verify that --tv-font-size-lg corresponds to 14px or the intended size. If not, consider adding a fallback size:

-  --tv-Loading-text-font-size: var(--tv-font-size-lg);
+  --tv-Loading-text-font-size: var(--tv-font-size-lg, 14px);

To verify, you can run the following script:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for the definition of --tv-font-size-lg
rg --type less "tv-font-size-lg"

Length of output: 2558

// 加载图标文本垂直方向外边距
--ti-loading-text-margin-vertical: var(--ti-common-space-4x, 16px);
--tv-Loading-text-margin-y: var(--tv-space-xl);
// 加载图标文本水平方向外边距
--ti-loading-text-margin-horizontal: var(--ti-common-space-0, 0px);
--tv-Loading-text-margin-x: 0;

// 全屏加载图标small尺寸时的宽度
--ti-loading-fullscreen-small-width: 16px;
--tv-Loading-fullscreen-small-width: var(--tv-icon-size);
// 全屏加载图标medium尺寸时的宽度
--ti-loading-fullscreen-medium-width: 24px;
--tv-Loading-fullscreen-medium-width: var(--tv-size-height-xs);
// 全屏加载图标large尺寸时的宽度
--ti-loading-fullscreen-large-width: 32px;
--tv-Loading-fullscreen-large-width: var(--tv-size-height-md);

// 全屏加载图标small尺寸时的高度
--ti-loading-fullscreen-small-height: 16px;
--tv-Loading-fullscreen-small-height: var(--tv-icon-size);
// 全屏加载图标medium尺寸时的高度
--ti-loading-fullscreen-medium-height: 24px;
--tv-Loading-fullscreen-medium-height: var(--tv-size-height-xs);
// 全屏加载图标large尺寸时的高度
--ti-loading-fullscreen-large-height: 32px;
--tv-Loading-fullscreen-large-height: var(--tv-size-height-md);

// 默认加载图标small尺寸时的高度
--ti-loading-spinner-small-height: 16px;
--tv-Loading-spinner-small-height: var(--tv-icon-size);
// 默认加载图标medium尺寸时的高度
--ti-loading-spinner-medium-height: 24px;
--tv-Loading-spinner-medium-height: var(--tv-size-height-xs);
// 默认加载图标large尺寸时的高度
--ti-loading-spinner-large-height: 32px;
--tv-Loading-spinner-large-height: var(--tv-size-height-md);

// 默认加载图标small尺寸时的宽度
--ti-loading-spinner-small-width: 16px;
--tv-Loading-spinner-small-width: var(--tv-icon-size);
// 默认加载图标medium尺寸时的宽度
--ti-loading-spinner-medium-width: 24px;
--tv-Loading-spinner-medium-width: var(--tv-size-height-xs);
// 默认加载图标large尺寸时的宽度
--ti-loading-spinner-large-width: 32px;
--tv-Loading-spinner-large-width: var(--tv-size-height-md);
}
Loading