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): refactor business comp theme vars #2223

Merged
merged 1 commit into from
Sep 30, 2024
Merged

refactor(theme): refactor business comp theme vars #2223

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
33 changes: 15 additions & 18 deletions packages/theme/src/amount/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,10 @@
@radio-prefix-cls: ~'@{css-prefix}radio';

.@{amount-prefix-cls} {
.component-css-vars-amount();
.inject-Amount-vars();
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Old mixin component-css-vars-amount is still in use.

  • packages/theme/src/card-group/vars.less
  • packages/theme/src/card-group/index.less
  • packages/theme/src/card/vars.less
  • packages/theme/src/card/index.less
🔗 Analysis chain

Approve mixin change with verification.

The change from .component-css-vars-amount() to .inject-Amount-vars() improves naming specificity. However, ensure this change is consistent across the codebase and doesn't break existing styles.

Run the following script to check for any remaining usage of the old mixin:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any remaining usage of the old mixin

# Test: Search for the old mixin name. Expect: No results.
rg --type less "component-css-vars-amount"

Length of output: 861

Script:

#!/bin/bash
# Description: Check for any remaining usage of the old mixin

# Test: Search for the old mixin name. Expect: No results.
rg --type less "component-css-vars-amount"

Length of output: 318


width: 270px;

&-filter-box {
.popover-left {
font-size: 12px;
Expand All @@ -31,8 +32,9 @@

& &-input-icon {
.@{svg-prefix-cls} {
fill: var(--ti-amount-icon-color);
font-size: var(--ti-amount-icon-font-size);
fill: var(--tv-Amount-icon-color);
width: var(--tv-Amount-icon-size);
height: var(--tv-Amount-icon-size);
}
}

Expand All @@ -47,14 +49,11 @@
.@{radio-prefix-cls}-group {
display: inline-block;
}

.popover-filter-botton {
background-color: #f5f6f8;
padding-top: 1px;
padding-bottom: 1px;
box-sizing: border-box;
margin-bottom: 8px;
margin-left: 0px;
margin-right: 8px;
margin: 0 8px 8px 0;
display: inline-flex;
justify-content: center;
align-items: center;
Expand All @@ -63,25 +62,22 @@
min-width: 48px;
text-align: center;
max-width: none;
padding-left: 8px;
padding-right: 8px;
border-width: 1px;
border-color: #f5f6f8;
border-style: solid;
padding: 1px 8px;
border: 1px solid #f5f6f8;
font-style: normal;

&.is-checked {
color: var(--ti-base-bg-color-2);
border-color:var(--ti-base-bg-color-2);
color: #fafafa;
border-color: #fafafa;
}

.@{radio-prefix-cls}__input {
display: none;
}

.@{radio-prefix-cls}__label {
padding-left: 0px;
padding-right: 0px;
padding-left: 0;
padding-right: 0;
line-height: 20px;
height: 20px;
display: inline-block;
Expand All @@ -90,7 +86,7 @@

.popover-filter-botton:nth-child(4),
.popover-filter-botton:nth-child(8) {
margin-right: 0px;
margin-right: 0;
}
}

Expand All @@ -108,6 +104,7 @@
flex: 0 0 auto;
margin-right: 8px;
text-align: right;

& + .tiny-date-container {
width: 100%;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/theme/src/amount/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
*
*/

.component-css-vars-amount() {
--ti-amount-icon-color: var(--ti-base-color-brand-6, #191919);
--ti-amount-icon-font-size: var(--ti-common-font-size-1, 14px);
.inject-Amount-vars() {
--tv-Amount-icon-color: var(--tv-color-icon);
--tv-Amount-icon-size: var(--tv-icon-size);
}
15 changes: 7 additions & 8 deletions packages/theme/src/roles/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
@roles-prefix-cls: ~'@{css-prefix}roles';

.@{roles-prefix-cls} {
.component-css-vars-roles();
.inject-Roles-vars();

svg {
margin-left: 2px;
Expand All @@ -43,25 +43,24 @@
}

&__poplist-item {
min-height: var(--ti-roles-poplist-item-height);
line-height: var(--ti-roles-poplist-item-height);
min-height: var(--tv-Roles-poplist-item-height);
line-height: var(--tv-Roles-poplist-item-height);
max-width: 100%;
color: var(--ti-roles-poplist-item-text-color);
font-size: var(--ti-roles-poplist-item-font-size);
color: var(--tv-Roles-poplist-item-text-color);
font-size: var(--tv-Roles-poplist-item-font-size);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;

&:hover {
background: var(--ti-roles-poplist-item-hover-bg-color);
background: var(--tv-Roles-poplist-item-hover-bg-color);
}

&.is-selected {
&,
&:hover {
background: var(--ti-roles-poplist-item-selected-bg-color);
color: var(--ti-roles-poplist-item-selected-text-color);
background: var(--tv-Roles-poplist-item-selected-bg-color);
}
}
}
Expand Down
18 changes: 11 additions & 7 deletions packages/theme/src/roles/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,15 @@
*
*/

.component-css-vars-roles() {
--ti-roles-poplist-item-height: var(--ti-common-size-height-normal, 32px);
--ti-roles-poplist-item-text-color: var(--ti-common-color-info-normal, #191919);
--ti-roles-poplist-item-font-size: var(--ti-common-font-size-base, 14px);
--ti-roles-poplist-item-hover-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
--ti-roles-poplist-item-selected-bg-color: var(--ti-common-color-selected-background, #f5f5f5);
--ti-roles-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #191919);
.inject-Roles-vars() {
// 下拉面板选项高度
--tv-Roles-poplist-item-height: var(--tv-size-height-md);
// 下拉面板选项字体颜色
--tv-Roles-poplist-item-text-color: var(--tv-color-text);
// 下拉面板选项字体尺寸
--tv-Roles-poplist-item-font-size: var(--tv-font-size-md);
// 下拉面板选项悬浮背景色
--tv-Roles-poplist-item-hover-bg-color: var(--tv-color-bg-hover);
// 下拉面板选项选中色
--tv-Roles-poplist-item-selected-bg-color: var(--tv-color-bg-active);
}
8 changes: 4 additions & 4 deletions packages/theme/src/user-account/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@
@logout-prefix-cls: ~'@{css-prefix}logout';

.@{user-contact-prefix-cls} {
.component-css-vars-user-account();
.inject-UserAccount-vars();

&__main {
.user-account-pop {
padding: var(--ti-user-account-padding-vertical) var(--ti-user-account-padding-horizontal);
padding: 0 8px;
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider using CSS variables for padding to maintain theme flexibility.

While the fixed padding of 0 8px simplifies the style, it reduces the ability to customize the theme easily. Consider using CSS variables for both vertical and horizontal padding to maintain consistency with the theming system and allow for easier customization.

Here's a suggested modification:

- padding: 0 8px;
+ padding: var(--tv-UserAccount-padding-vertical, 0) var(--tv-UserAccount-padding-horizontal, 8px);

This change would allow for easy customization while providing default values.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
padding: 0 8px;
padding: var(--tv-UserAccount-padding-vertical, 0) var(--tv-UserAccount-padding-horizontal, 8px);

}

.user-account-custom {
line-height: var(--ti-user-account-line-height);
line-height: var(--tv-UserAccount-line-height);
}

.@{logout-prefix-cls} {
line-height: var(--ti-user-account-line-height);
line-height: var(--tv-UserAccount-line-height);
}
}
}
7 changes: 3 additions & 4 deletions packages/theme/src/user-account/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@
*
*/

.component-css-vars-user-account() {
--ti-user-account-padding-vertical: 0;
--ti-user-account-padding-horizontal: var(--ti-common-space-2x, 8px);
--ti-user-account-line-height: 36px;
.inject-UserAccount-vars() {
// 行高尺寸
--tv-UserAccount-line-height: 36px;
}
14 changes: 7 additions & 7 deletions packages/theme/src/user-card/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
@card-prefix-cls: ~'@{css-prefix}card';

.@{card-prefix-cls} {
.component-css-vars-user-card();
.inject-UserCard-vars();

border: 1px solid var(--ti-usercard-border-color);
border: 1px solid var(--tv-UserCard-border-color);
box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);

.dialog-foot {
Expand All @@ -41,7 +41,7 @@
img {
width: 80px;
height: 80px;
border-radius: var(--ti-usercard-image-border-radius, 3px);
border-radius: var(--tv-UserCard-image-border-radius, 3px);
}

.card-top-text {
Expand All @@ -64,25 +64,25 @@
}

.espace-online {
color: var(--ti-usercard-state-online-text-color);
color: var(--tv-UserCard-state-online-text-color);
}

.espace-busy {
color: var(--ti-usercard-state-busy-text-color);
color: var(--tv-UserCard-state-busy-text-color);
font-size: 23px;
vertical-align: middle;
margin-top: -5px;
}

.espace-goaway {
color: var(--ti-usercard-state-goaway-text-color);
color: var(--tv-UserCard-state-goaway-text-color);
background: #fff;
border-radius: 50%;
font-size: 13px;
}

.espace-offline {
color: var(--ti-usercard-state-offline-text-color);
color: var(--tv-UserCard-state-offline-text-color);
font-size: 23px;
vertical-align: middle;
margin-top: -5px;
Expand Down
20 changes: 13 additions & 7 deletions packages/theme/src/user-card/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,17 @@
*
*/

.component-css-vars-user-card() {
--ti-usercard-border-color: var(--ti-common-color-border, #999999);
--ti-usercard-image-border-radius: var(--ti-common-border-radius-normal, 6px);
--ti-usercard-state-online-text-color: #33cc00;
--ti-usercard-state-busy-text-color: #ff3300;
--ti-usercard-state-goaway-text-color: #ffae00;
--ti-usercard-state-offline-text-color: #aeaeae;
.inject-UserCard-vars() {
// 卡片边框色
--tv-UserCard-border-color: var(--tv-color-border);
// 卡片圆角
--tv-UserCard-image-border-radius: var(--tv-border-radius-md);
// 在线文本色
--tv-UserCard-state-online-text-color: var(--tv-color-success-text);
// 忙碌文本色
--tv-UserCard-state-busy-text-color: var(--tv-color-error-text);
// 离开文本色
--tv-UserCard-state-goaway-text-color: var(--tv-color-warn-text);
// 离线文本色
--tv-UserCard-state-offline-text-color: var(--tv-color-text-disabled);
}
Loading
Loading