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): [qr-code,text-popup,watemark,rate] refactor some com… #2219

Merged
merged 3 commits into from
Sep 30, 2024
Merged

refactor(theme): [qr-code,text-popup,watemark,rate] refactor some com… #2219

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5af3d9
refactor(theme): [qr-code,text-popup,watemark,rate] refactor some com…
zzcr Sep 30, 2024
32ba05f
refactor(theme): [qr-code,text-popup,watemark,rate] refactor some com…
zzcr Sep 30, 2024
05d794b
refactor(theme): [qr-code,text-popup,watemark,rate] refactor some com…
zzcr Sep 30, 2024
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
1 change: 1 addition & 0 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,7 @@
--tv-font-weight-bold: 600;

/** 4. 圆角变量 **/
--tv-border-radius-xs: 2px;
--tv-border-radius-sm: 4px;
--tv-border-radius-md: 6px;
--tv-border-radius-lg: 8px;
Expand Down
68 changes: 32 additions & 36 deletions packages/theme/src/bulletin-board/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,19 @@
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{bulletin-board-prefix-cls} {
.component-css-vars-bulletin-board();
.inject-BulletinBoard-vars();

&__item {
margin-bottom: var(--ti-bulletin-board-item-margin-bottom);
margin-bottom: 24px;
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 replacing hardcoded values with CSS variables for consistency and maintainability

While many styles have been updated to use CSS variables, some properties still use hardcoded values:

  • Line 24: margin-bottom: 24px;
  • Line 29: margin-bottom: 8px;
  • Line 49: padding: 12px 0 8px 24px;
  • Line 85: padding: 0 4px;
  • Line 86: margin-left: 6px;
  • Line 144: padding: 0;

Consider defining new CSS variables for these values to enhance consistency and make future adjustments easier.

Also applies to: 29-29, 49-49, 85-85, 86-86, 144-144


.@{bulletin-board-prefix-cls}__textTitle {
display: block;
color: var(--ti-bulletin-board-item-title-text-color);
margin-bottom: var(--ti-bulletin-board-item-title-text-margin-bottom);
color: var(--tv-BulletinBoard-item-title-text-color);
margin-bottom: 8px;
font-size: var(--ti-common-font-size-base);
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Ensure consistency in CSS variable prefixes

There are variables still using the --ti- prefix:

  • Line 30: font-size: var(--ti-common-font-size-base);
  • Line 146: font-size: var(--ti-common-font-size-1);

Since the refactoring changes variables to the --tv- prefix, consider updating these to maintain consistency across the codebase.

Also applies to: 146-146

white-space: normal;
font-family: Helvetica, Arial, 'microsoft yahei';
line-height: initial;
font-weight: var(--ti-bulletin-board-item-title-font-weight);
font-weight: var(--tv-BulletinBoard-item-title-font-weight);

&,
&:hover {
Expand All @@ -40,57 +39,56 @@
}

.@{bulletin-board-prefix-cls}__textDate {
color: var(--ti-bulletin-board-item-date-text-color);
font-size: var(--ti-bulletin-board-item-date-font-size);
color: var(--tv-BulletinBoard-item-date-text-color);
font-size: var(--tv-BulletinBoard-item-date-font-size);
}
}

&__title {
font-size: var(--ti-bulletin-board-title-font-size);
padding: 12px 0px 8px 24px;
color: var(--ti-bulletin-board-title-text-color);
font-weight: var(--ti-bulletin-board-title-font-weight);
font-size: var(--tv-BulletinBoard-title-font-size);
padding: 12px 0 8px 24px;
color: var(--tv-BulletinBoard-title-text-color);
font-weight: var(--tv-BulletinBoard-title-font-weight);
}

&__more {
text-align: right;

& &-link {
color: var(--ti-bulletin-board-more-text-color);
font-size: var(--ti-bulletin-board-more-font-size);
color: var(--tv-BulletinBoard-more-text-color);
font-size: var(--tv-BulletinBoard-more-font-size);
line-height: normal;
display: inline-flex;
justify-content: center;
align-items: center;

.@{svg-prefix-cls} {
fill: var(--ti-bulletin-board-more-text-color);
font-size: var(--ti-bulletin-board-more-icon-font-size);
fill: var(--tv-BulletinBoard-more-icon-color);
font-size: var(--tv-BulletinBoard-more-icon-font-size);
margin-left: 4px;
}

&:hover {
text-decoration: none;

.@{svg-prefix-cls} {
fill: var(--ti-bulletin-board-more-hover-text-color);
fill: var(--tv-BulletinBoard-more-icon-color-hover);
}
}
}
}

&__new {
background-color: var(--ti-bulletin-board-new-bg-color);
color: var(--ti-bulletin-board-new-text-color);
border-radius: var(--ti-bulletin-board-new-border-radius);
padding: 0 var(--ti-bulletin-board-new-padding-left);
margin-left: var(--ti-bulletin-board-new-margin-left);
background-color: var(--tv-BulletinBoard-new-bg-color);
color: var(--tv-BulletinBoard-new-text-color);
border-radius: var(--tv-BulletinBoard-new-border-radius);
padding: 0 4px;
margin-left: 6px;
min-width: 30px;
min-height: 16px;
line-height: 16px;
font-size: var(--ti-bulletin-board-new-font-size);
font-size: var(--tv-BulletinBoard-new-font-size);
display: inline-block;
font-family: var(--ti-bulletin-board-new-font-family);
box-sizing: border-box;
font-weight: 500;
text-align: center;
Expand Down Expand Up @@ -143,13 +141,13 @@
.@{tabs-prefix-cls}__item {
line-height: 36px;
height: 36px;
padding: 0 var(--ti-bulletin-board-tabs-item-text-padding-right);
padding: 0;
box-sizing: border-box;
display: inline-block;
list-style: none;
font-size: var(--ti-common-font-size-1);
font-weight: 500;
color: var(--ti-bulletin-board-tabs-item-text-color);
color: var(--tv-BulletinBoard-tabs-item-text-color);
position: relative;

&:focus,
Expand All @@ -158,18 +156,16 @@
}

&:hover {
color: var(--ti-bulletin-board-tabs-item-hover-text-color);
cursor: pointer;
font-weight: var(--ti-bulletin-board-tabs-item-hover-text-font-weight);
font-weight: var(--tv-BulletinBoard-tabs-item-hover-text-font-weight);
}

&.is-active {
color: var(--ti-bulletin-board-tabs-item-hover-text-color);
font-weight: var(--ti-bulletin-board-tabs-item-hover-text-font-weight);
font-weight: var(--tv-BulletinBoard-tabs-item-hover-text-font-weight);
}

&.is-disabled {
color: var(--ti-bulletin-board-tabs-item-disabled-text-color);
color: var(--tv-BulletinBoard-tabs-item-disabled-text-color);
cursor: default;
}

Expand Down Expand Up @@ -201,15 +197,15 @@
}
}

&::before {
bottom: 0px;
&:before {
bottom: 0;
top: auto !important;
left: auto !important;
}
}

.@{tabs-prefix-cls}__content {
padding: 12px var(--ti-bulletin-board-contentr-padding-right) var(--ti-bulletin-board-contentr-padding-button);
padding: 12px 0 0;
}

&.@{tabs-prefix-cls}--card {
Expand All @@ -224,7 +220,7 @@
}

> .@{tabs-prefix-cls}__header {
border-bottom: 1px solid var(--ti-bulletin-board-tabs-header-border-color);
border-bottom: 1px solid var(--tv-BulletinBoard-tabs-header-border-color);

.@{tabs-prefix-cls}__item {
border-bottom: 1px solid transparent;
Expand All @@ -249,7 +245,7 @@
content: '';
width: 100%;
height: 3px;
background: var(--ti-bulletin-board-tabs-item-hover-text-color);
background: var(--tv-BulletinBoard-tabs-item-bg-color);
margin-left: -24px;
}
}
Expand Down
72 changes: 43 additions & 29 deletions packages/theme/src/bulletin-board/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,47 @@
*
*/

.component-css-vars-bulletin-board() {
--ti-bulletin-board-title-font-size: var(--ti-common-font-size-3, 18px);
--ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7, bold);
--ti-bulletin-board-title-text-color: var(--ti-common-color-info-normal, #191919);
--ti-bulletin-board-item-title-text-color: var(--ti-common-color-text-primary, #191919);
--ti-bulletin-board-item-title-text-margin-bottom: var(--ti-common-space-2x, 8px);
--ti-bulletin-board-tabs-item-hover-text-font-weight: var(--ti-common-font-weight-bold, 600);
--ti-bulletin-board-item-title-font-weight: var(--ti-common-font-weight-bold, 600);
--ti-bulletin-board-tabs-item-text-padding-right: var(--ti-common-space-0, 0px);
--ti-bulletin-board-contentr-padding-right: var(--ti-common-space-0, 0px);
--ti-bulletin-board-contentr-padding-button: var(--ti-common-space-0, 0px);
--ti-bulletin-board-new-padding-left: var(--ti-common-size-base, 4px);
--ti-bulletin-board-new-margin-left: var(--ti-common-space-6, 6px);
--ti-bulletin-board-new-font-family: PingFangSC ,PingFangSC-Regular;
--ti-bulletin-board-item-margin-bottom: var(--ti-common-space-6x, 24px);
--ti-bulletin-board-item-date-text-color: var(--ti-common-color-placeholder, #808080);
--ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base, 14px);
--ti-bulletin-board-new-bg-color: var(--ti-common-color-error-border-secondary, #fce3e1);
--ti-bulletin-board-new-text-color: var(--ti-common-color-error-border, #f23030);
--ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-1, 2px);
--ti-bulletin-board-more-text-color: var(--ti-common-color-text-primary, #191919);
--ti-bulletin-board-more-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
--ti-bulletin-board-more-font-size: var(--ti-common-font-size-base, 14px);
--ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1, 14px);
--ti-bulletin-board-new-font-size: var(--ti-common-font-size-0, 12px);
--ti-bulletin-board-tabs-item-text-color: var(--ti-common-color-info-normal, #191919);
--ti-bulletin-board-tabs-item-hover-text-color: var(--ti-common-color-text-primary, #191919);
--ti-bulletin-board-tabs-item-disabled-text-color: var(--ti-common-color-placeholder, #808080);
--ti-bulletin-board-tabs-header-border-color: var(--ti-common-color-border, #999999);
.inject-BulletinBoard-vars() {
// 标题字号
--tv-BulletinBoard-title-font-size: var(--tv-font-size-heading-sm);
// 标题字重
--tv-BulletinBoard-title-font-weight: var(--tv-font-weight-bold);
// 标题文字颜色
--tv-BulletinBoard-title-text-color: var(--tv-color-text);
// 子项文字颜色
--tv-BulletinBoard-item-title-text-color: var(--tv-color-text);
// tabs标题想文字hover字重
--tv-BulletinBoard-tabs-item-hover-text-font-weight: var(--tv-font-weight-bold);
// 子项标题文字字重
--tv-BulletinBoard-item-title-font-weight: var(--tv-font-weight-bold);
// 子项日期文字颜色
--tv-BulletinBoard-item-date-text-color: var(--tv-color-text-weaken);
// 子项日期文字尺寸
--tv-BulletinBoard-item-date-font-size: var(--tv-font-size-md);
// new标签背景颜色
--tv-BulletinBoard-new-bg-color: var(--tv-color-error-bg-light);
// new标签文字颜色
--tv-BulletinBoard-new-text-color: var(--tv-color-error-text);
// new标签边框圆角
--tv-BulletinBoard-new-border-radius: var(--tv-border-radius-xs);
// new标签文字大小
--tv-BulletinBoard-new-font-size: var(--tv-font-size-sm);
// 更多按钮文字颜色
--tv-BulletinBoard-more-text-color: var(--tv-color-text);
// 更多按钮图标颜色
--tv-BulletinBoard-more-icon-color: var(--tv-color-icon);
// 更多按钮图标悬浮颜色
--tv-BulletinBoard-more-icon-color-hover: var(--tv-color-icon-hover);
// 更多按钮文字尺寸
--tv-BulletinBoard-more-font-size: var(--tv-font-size-md);
// 更多按钮图标尺寸
--tv-BulletinBoard-more-icon-font-size: var(--tv-font-size-md);
// tabs标签文字颜色
--tv-BulletinBoard-tabs-item-text-color: var(--tv-color-text);
// tabs标签背景颜色
--tv-BulletinBoard-tabs-item-bg-color: var(--tv-color-bg-primary);
// tabs标签文字禁用颜色
--tv-BulletinBoard-tabs-item-disabled-text-color: var(--tv-color-text-disabled);
// tabs标签头部边框颜色
--tv-BulletinBoard-tabs-header-border-color: var(--tv-color-border);
}
18 changes: 9 additions & 9 deletions packages/theme/src/dept/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@
@col-prefix-cls: ~'@{css-prefix}col';

.@{dept-prefix-cls} {
.component-css-vars-dept();
.inject-Dept-vars();

&__search {
margin-bottom: 12px;
}

&__text,
&__label {
font-size: var(--ti-dept-label-font-size);
color: var(--ti-dept-label-text-color);
font-weight: var(--ti-dept-label-font-weight);
font-size: var(--tv-Dept-label-font-size);
color: var(--tv-Dept-label-text-color);
font-weight: var(--tv-Dept-label-font-weight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -45,11 +45,11 @@
}

&__selected-info {
color: var(--ti-dept-selected-info-text-color);
font-size: var(--ti-dept-label-font-size);
background: var(--ti-dept-selected-info-bg-color);
color: var(--tv-Dept-selected-info-text-color);
font-size: var(--tv-Dept-label-font-size);
background: var(--tv-Dept-selected-info-bg-color);
padding: 5px;
border-radius: var(--ti-dept-selected-info-border-radius);
border-radius: var(--tv-Dept-selected-info-border-radius);
}

&__item {
Expand All @@ -75,6 +75,6 @@

.@{input-prefix-cls}__icon {
vertical-align: middle;
fill: var(--ti-dept-selected-info-text-color);
fill: var(--tv-Dept-selected-info-text-color);
}
}
14 changes: 7 additions & 7 deletions packages/theme/src/dept/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
*
*/

.component-css-vars-dept() {
--ti-dept-label-font-size: var(--ti-common-font-size-base, 14px);
--ti-dept-label-text-color: var(--ti-common-color-info-normal, #191919);
--ti-dept-label-font-weight: var(--ti-common-font-weight-7, bold);
--ti-dept-selected-info-text-color: var(--ti-base-color-brand-6, #191919);
--ti-dept-selected-info-bg-color: #f1f1f1;
--ti-dept-selected-info-border-radius: var(--ti-common-border-radius-normal, 6px);
.inject-Dept-vars() {
--tv-Dept-label-font-size: var(--tv-font-size-md);
--tv-Dept-label-text-color: var(--tv-color-text);
--tv-Dept-label-font-weight: var(--tv-font-weight-bold);
--tv-Dept-selected-info-text-color: var(--tv-color-text);
--tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
--tv-Dept-selected-info-border-radius: var(--tv-border-radius-md);
}
11 changes: 0 additions & 11 deletions packages/theme/src/drop-roles/vars.less
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions packages/theme/src/espace/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{espace-prefix-cls} {
.component-css-vars-espace();
.inject-Espace-vars();

.item-talk,
.item-call,
Expand All @@ -26,13 +26,13 @@
line-height: 1;

.@{svg-prefix-cls} {
fill: var(--ti-espace-text-color);
font-size: var(--ti-espace-font-size);
fill: var(--tv-Espace-icon-color);
font-size: var(--tv-Espace-font-size);
}

&:hover {
.@{svg-prefix-cls} {
fill: var(--ti-espace-hover-text-color);
fill: var(--tv-Espace-icon-color-hover);
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions packages/theme/src/espace/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
*
*/

.component-css-vars-espace() {
--ti-espace-font-size: 26px;
--ti-espace-text-color: var(--ti-base-color-brand-6, #191919);
--ti-espace-hover-text-color: var(--ti-base-color-brand-5, #c2c2c2);
.inject-Espace-vars() {
--tv-Espace-font-size: 26px;
--tv-Espace-icon-color: var(--tv-color-icon);
--tv-Espace-icon-color-hover: var(--tv-color-icon-hover);
}
11 changes: 0 additions & 11 deletions packages/theme/src/fullscreen/vars.less
View file
Open in desktop

This file was deleted.

Loading
Loading