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

fix(tabs): [tabs] Adapt to the old theme style #2523

Merged
merged 2 commits into from
Nov 20, 2024
Merged

fix(tabs): [tabs] Adapt to the old theme style #2523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd2f15a
fix(tabs): [tabs] 适配旧主题样式风格
chenxi-20 Nov 14, 2024
55d59c7
fix(e2e): 修复测试用例报错
chenxi-20 Nov 20, 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: 0 additions & 1 deletion packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,6 @@
--tv-color-bg-active-secondary: var(--tv-base-color-common-1); // #fff 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色
--tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); // #deecff 时间选择选中背景色
--tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色
--tv-color-bg-active-dark: var(--tv-base-color-common-11); // #191919 深色背景色激活色（待确认）

/** 2.7 边框色/分割线颜色 **/

Expand Down
2 changes: 0 additions & 2 deletions packages/theme/src/tabs/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,8 +432,6 @@

&.is-active {
top: -1px;
border-bottom: var(--tv-Tabs-item-bottom-border-weight) var(--tv-Tabs-item-bottom-border-style)
var(--tv-Tabs-item-bottom-border-color);
border-top: var(--tv-Tabs-item-top-right-border-weight) solid var(--tv-Tabs-border-color); // aurora新增
border-left: 1px solid var(--tv-Tabs-border-color);
border-right: var(--tv-Tabs-item-top-right-border-weight) solid var(--tv-Tabs-border-color); // aurora新增
Expand Down
12 changes: 3 additions & 9 deletions packages/theme/src/tabs/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,6 @@
--tv-Tabs-small-item-font-size: var(--tv-font-size-heading-xs, 16px);
// card类型标签项水平内边距
--tv-Tabs-item-padding-horizontal: var(--tv-space-lg, 12px);
// card类型选中项底部小滑块厚度(hide)
--tv-Tabs-item-bottom-border-weight: var(--tv-border-width, 1px);
// card类型选中项底部边框色
--tv-Tabs-item-bottom-border-color: var(--tv-color-act-primary-border-light-hover, #ffffff);
// card类型选中项(不含下|左)边框厚度
--tv-Tabs-item-top-right-border-weight: var(--tv-border-width, 1px);
// card类型选中项背景色
Expand Down Expand Up @@ -103,8 +99,6 @@
--tv-Tabs-item-margin-right: 32px;
// 标签项active边框样式(hide)
--tv-Tabs-item-active-border-style: solid;
// 标签项底部边框样式(hide)
--tv-Tabs-item-bottom-border-style: solid;
// 横向标签栏字号
--tv-Tabs-item-font-size: var(--tv-font-size-heading-xs, 16px);
// 纵向标签栏非选中项背景色
Expand Down Expand Up @@ -152,7 +146,7 @@
// 内容水平外边距
--tv-Tabs-content-margin-horizontal: 0px;
// buttoncard类型标签栏背景色
--tv-Tabs-button-card-nav-bg-color: var(--tv-color-bg-active, #f5f5f5);
--tv-Tabs-button-card-nav-bg-color: var(--tv-color-bg, #f5f5f5);
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Review color semantic usage in button-card navigation

The changes to button-card navigation colors raise some concerns:

  • Using --tv-color-success-bg-white for the active state (line 159) seems semantically incorrect, as this isn't indicating a success state. Consider using a more semantically appropriate variable like --tv-color-act-primary-bg-white or creating a new specific variable for this use case.

Also applies to: 159-159, 161-161

// buttoncard类型选项文本色
--tv-Tabs-button-card-item-text-color: #595959;
// buttoncard类型选项悬浮文本色
Expand All @@ -162,9 +156,9 @@
// buttoncard类型选项高度
--tv-Tabs-button-card-item-height: var(--tv-size-height-default, 32px);
// buttoncard类型选中项背景色
--tv-Tabs-button-card-item-active-bg-color: var(--tv-color-act-primary-bg-white-active, #ffffff);
--tv-Tabs-button-card-item-active-bg-color: var(--tv-color-success-bg-white, #ffffff);
// buttoncard类型选中项文本色
--tv-Tabs-button-card-item-active-text-color: #191919;
--tv-Tabs-button-card-item-active-text-color: var(--tv-color-act-primary-text, #191919);
// buttoncard类型选中项边框色
--tv-Tabs-button-card-item-active-border-color: #191919;
// buttoncard类型圆角
Expand Down
Loading