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

[tooltip,datepicker,tree] fix problems when switch to old theme #2550

Merged
merged 7 commits into from
Nov 25, 2024
Merged

[tooltip,datepicker,tree] fix problems when switch to old theme #2550

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c9a89ad
fix(tooltip): fix tooltip's offset demo
shenjunjian Nov 22, 2024
2066ae4
fix(modal): fix 确定 not in center
shenjunjian Nov 22, 2024
f99aa4e
fix(button): fix button's old-theme
shenjunjian Nov 22, 2024
94f34e1
fix(date-picker): fix date-picker's visibleArrow
shenjunjian Nov 25, 2024
3afb194
fix(modal): fix tag's padding
shenjunjian Nov 25, 2024
7a79b6a
fix(tree-node): increase the robustness of the location
shenjunjian Nov 25, 2024
9302cf3
fix(base): fix
shenjunjian Nov 25, 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
2 changes: 1 addition & 1 deletion packages/renderless/src/common/deps/popper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -782,7 +782,7 @@ class Popper {
if (this._options.updateHiddenPopperOnScroll) {
this.state.updateBoundFn()
} else {
if (isDisplayNone(this._popper)) return
if (isDisplayNone(this._reference)) return
this.state.updateBoundFn()
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/renderless/src/picker/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1328,7 +1328,7 @@ export const initPopper = ({ props, hooks, vnode }) => {
props: {
...props,
popperOptions: Object.assign({ boundariesPadding: 0, gpuAcceleration: false }, props.popperOptions),
visibleArrow: true,
visibleArrow: false,
offset: 0,
boundariesPadding: 5,
arrowOffset: 35,
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/base/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
*/

@import './reset.less';
@import './vars.less';
// @import './old-theme.less';
// @import './vars.less';
Copy link
Member

Choose a reason for hiding this comment

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

这个给改回来~~

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

已回退

@import './old-theme.less';
@import './transition.less';
14 changes: 13 additions & 1 deletion packages/theme/src/base/old-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,9 @@
--tv-color-act-primary-border-light-hover-1: var(--tv-base-color-brand-3); // #beccfa 幽灵hover边框色-2.2
--tv-color-act-primary-border-light-active-1: var(--tv-base-color-brand-3); // #beccfa 幽灵active边框色-2.2

/* 成功-success */
--tv-color-act-primary-plain-text-hover: var(--tv-base-color-common-1); // #fff

/* 成功-success */
--tv-color-act-success-text: var(--tv-base-color-success-6); // #50d4ab 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接
--tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #50d4ab 成功hover文本色-1
--tv-color-act-success-text-active: var(--tv-base-color-success-6); // #50d4ab 成功active文本色-1
Expand All @@ -189,6 +191,8 @@
--tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover边框色
--tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // #edf7df 成功active边框色

--tv-color-act-success-plain-text-hover: var(--tv-base-color-common-1); // #fff

/* 告警-warning */
--tv-color-act-warning-text: var(--tv-base-color-warn-7); // #e37d29 告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接
--tv-color-act-warning-text-hover: var(--tv-base-color-warn-7); // #e37d29 告警hover文本色-1
Expand Down Expand Up @@ -216,6 +220,8 @@
--tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色
--tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色

--tv-color-act-warning-plain-text-hover: var(--tv-base-color-common-1); // #fff

/* 危险-danger */
--tv-color-act-danger-text: var(--tv-base-color-error-12); // #c7000b 危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接
--tv-color-act-danger-text-hover: var(--tv-base-color-error-12); // #c7000b 危险hover文本色-1
Expand Down Expand Up @@ -243,6 +249,8 @@
--tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #ffeceb 危险hover边框色
--tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #ffeceb 危险active边框色

--tv-color-act-danger-plain-text-hover: var(--tv-base-color-common-1); // #fff

/* 信息-info */
--tv-color-act-info-text: var(--tv-base-color-info-7);// 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接
--tv-color-act-info-text-hover: var(--tv-base-color-info-7); // #5e7ce0 信息hover文本色-1
Expand Down Expand Up @@ -270,6 +278,8 @@
--tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover边框色
--tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active边框色

--tv-color-act-info-plain-text-hover: var(--tv-base-color-common-1); // #fff

/** 2.4 文本色 **/
--tv-color-text: var(--tv-base-color-common-8); // #252b3a 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
--tv-color-text-secondary: var(--tv-base-color-common-7); // #575d6c 二级文本色-次要信息
Expand All @@ -283,6 +293,8 @@
--tv-color-text-link-hover: var(--tv-base-color-brand-10); // #344899 链接悬浮色
--tv-color-text-darbg: var(--tv-base-color-common-5); // 深色背景文本色，顶级导航/一级tab文本色

--tv-color-plain-text-hover: var(--tv-base-color-brand-6); // #5e7c60

Comment on lines +296 to +297
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

The plain text hover color in old-theme.less is inconsistent with the design system

Based on the search results, there's a clear inconsistency in how plain text hover colors are implemented:

  • In old-theme.less, plain text hover uses brand color (--tv-base-color-brand-6, #5e7c60)
  • In the newer vars.less, plain text hover uses common text color (--tv-base-color-common-11, #191919)
  • All other plain text hover states in old-theme.less (primary, success, warning, danger, info) consistently use white color (--tv-base-color-common-1, #fff)

The implementation in old-theme.less appears to be a legacy inconsistency that should be aligned with either:

  • The newer implementation in vars.less using common text color, or
  • The consistent pattern of using white color for hover states as seen in other variants within the same file
🔗 Analysis chain

Consider aligning plain text hover color with other hover states.

The plain text hover color uses the brand color (--tv-base-color-brand-6) while other hover states use white. This might be intentional for plain text elements, but please verify if this difference in behavior is desired.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for any existing usage of plain text hover styles
# to understand the context of this color choice

# Search for usage of the plain text hover variable
rg "tv-color-plain-text-hover" -A 5

# Search for related class names or patterns
rg "plain-text.*hover" -A 5

Length of output: 12088

/** 2.5 图标色 **/
--tv-color-icon: var(--tv-base-color-common-7); // #575d6c 默认图标色
--tv-color-icon-hover: var(--tv-base-color-brand-6); // #5e7ce0 图标悬浮色
Expand Down
14 changes: 13 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 @@ -166,6 +166,8 @@
--tv-color-act-primary-border-light-hover-1: var(--tv-base-color-common-7); // #c2c2c2 幽灵hover边框色-2.2
--tv-color-act-primary-border-light-active-1: var(--tv-base-color-common-7); // #c2c2c2 幽灵active边框色-2.2

--tv-color-act-primary-plain-text-hover: var(--tv-base-color-brand); // #191919

/* 成功-success */
--tv-color-act-success-text: var(--tv-base-color-success-6); // #5cb300 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接
--tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #5cb300 成功hover文本色-1
Expand Down Expand Up @@ -193,6 +195,8 @@
--tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); // #edf7df 成功hover边框色
--tv-color-act-success-border-light-active: var(--tv-base-color-success-1); // #edf7df 成功active边框色

--tv-color-act-success-plain-text-hover: var(--tv-base-color-success-6); // #5cb300

/* 告警-warning */
--tv-color-act-warning-text: var(--tv-base-color-warn-6); // #ff8800 告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接
--tv-color-act-warning-text-hover: var(--tv-base-color-warn-6); // #ff8800 告警hover文本色-1
Expand Down Expand Up @@ -220,6 +224,8 @@
--tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色
--tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色

--tv-color-act-warning-plain-text-hover: var(--tv-base-color-warn-6); // #ff8800

/* 危险-danger */
--tv-color-act-danger-text: var(--tv-base-color-error-6); // #f23030 危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接
--tv-color-act-danger-text-hover: var(--tv-base-color-error-6); // #f23030 #f23030 危险hover文本色-1
Expand Down Expand Up @@ -247,6 +253,8 @@
--tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #fff1f0 危险hover边框色
--tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #fff1f0 危险active边框色

--tv-color-act-danger-plain-text-hover: var(--tv-base-color-error-6); // #f23030

/* 信息-info */
--tv-color-act-info-text: var(--tv-base-color-info-6); // #1476ff 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接
--tv-color-act-info-text-hover: var(--tv-base-color-info-6); // #1476ff 信息hover文本色-1
Expand Down Expand Up @@ -274,6 +282,8 @@
--tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff 信息hover边框色
--tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff 信息active边框色

--tv-color-act-info-plain-text-hover: var(--tv-base-color-info-6); // #1476ff

/** 2.4 文本色 **/
--tv-color-text: var(--tv-base-color-common-11); // #191919 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
--tv-color-text-secondary: var(--tv-base-color-common-9); // #595959 二级文本色-次要信息
Expand All @@ -286,6 +296,8 @@
--tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色（链接按钮）
--tv-color-text-link-hover: var(--tv-base-color-brand-6); // #1476ff 链接悬浮色

--tv-color-plain-text-hover: var(--tv-base-color-common-11); // #191919

/** 2.5 图标色 **/
--tv-color-icon: var(--tv-base-color-common-8); // #808080 默认图标色
--tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色
Expand Down Expand Up @@ -366,7 +378,7 @@
--tv-font-size-lg: 16px;
--tv-font-size-xl: 18px;
--tv-font-size-xxl: 20px;
--tv-font-size-default:var(--tv-font-size-md);
--tv-font-size-default: var(--tv-font-size-md);

--tv-font-size-heading-xs: 16px; // 卡片标题
--tv-font-size-heading-sm: 18px; // 页面标题
Expand Down
3 changes: 3 additions & 0 deletions packages/theme/src/button/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

display: inline-flex;
align-items: center;
justify-content: center;
appearance: none;
text-align: center;
white-space: nowrap;
Expand Down Expand Up @@ -105,13 +106,15 @@
.color-active-mixin(@theme, @plain) {
@bg: %('var(--tv-Button-bg-color%a-active-%a)', @plain, @theme);
@border: %('var(--tv-Button-border-color%a-active-%a)', @plain, @theme);
@c: %('var(--tv-Button-text-color%a-active-%a)', @plain, @theme);

&:active,
&:focus,
&:hover,
&.is-active {
background-color: e(@bg);
border-color: e(@border);
color: e(@c);
}
}
// 激活态： 叠加到 ghost 状态上。
Expand Down
17 changes: 11 additions & 6 deletions packages/theme/src/button/old-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
@import '../custom.less';
@button-prefix-cls: ~'@{css-prefix}button';

.@{button-prefix-cls} {
// 默认时按钮圆角
--tv-Button-border-radius: 2px;
.tiny-button {
// 默认时按钮内图标的大小
--tv-Button-size-icon-font-size: 14px;
// 超大按钮内图标的大小
--tv-Button-size-icon-font-size-large: 16px;
// 中等按钮内图标的大小
--tv-Button-size-icon-font-size-medium: 14px;
// 小型按钮内图标的大小
--tv-Button-size-icon-font-size-small: 12px;
// 超小按钮内图标的大小
--tv-Button-size-icon-font-size-mini: 12px;
}
26 changes: 25 additions & 1 deletion packages/theme/src/button/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,65 +221,89 @@
--tv-Button-bg-color-active-default: var(--tv-color-bg-hover-secondary); // 现规范，激活态时，只影响边框和背景
// 默认时按钮激活的边框色
--tv-Button-border-color-active-default: var(--tv-color-border);
// 默认时按钮激活的文本
--tv-Button-text-color-active-default: var(--tv-color-text);
// 默认时按钮激活的朴素背景色
--tv-Button-bg-color-plain-active-default: var(--tv-color-bg);
// 默认时按钮激活的朴素边框色
--tv-Button-border-color-plain-active-default: var(--tv-color-bg); // 朴素激活都无边框，所以等于背景色。
// 默认时按钮激活的朴素文本色
--tv-Button-text-color-plain-active-default: var(--tv-color-plain-text-hover);
// 默认时按钮激活的幽灵边框色
--tv-Button-border-color-ghost-active-default: var(--tv-color-border-ghost-active);

// primary 主题时按钮激活的背景色
--tv-Button-bg-color-active-primary: var(--tv-color-act-primary-bg-active);
// primary 主题时按钮激活的边框色
--tv-Button-border-color-active-primary: var(--tv-color-act-primary-border-active);
// primary 主题时按钮激活的文本色
--tv-Button-text-color-active-primary: var(--tv-color-act-primary-text-white-active);
// primary 主题时按钮激活的朴素背景色
--tv-Button-bg-color-plain-active-primary: var(--tv-color-act-primary-bg-white-active);
// primary 主题时按钮激活的朴素边框色
--tv-Button-border-color-plain-active-primary: var(--tv-color-act-primary-bg-white-active); // 无边框
// primary 主题时按钮激活的朴素文本色
--tv-Button-text-color-plain-active-primary: var(--tv-color-act-primary-plain-text-hover);
// primary 主题时按钮激活的幽灵边框色
--tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-border-light-active-1);
--tv-Button-border-color-ghost-active-primary: var(--tv-color-act-primary-plain-text-hover);

// success 主题时按钮激活的背景色
--tv-Button-bg-color-active-success: var(--tv-color-act-success-bg-active);
// success 主题时按钮激活的边框色
--tv-Button-border-color-active-success: var(--tv-color-act-success-border-active);
// success 主题时按钮激活的文本色
--tv-Button-text-color-active-success: var(--tv-color-act-success-text-white-active);
// success 主题时按钮激活的朴素背景色
--tv-Button-bg-color-plain-active-success: var(--tv-color-act-success-bg-light-active);
// success 主题时按钮激活的朴素边框色
--tv-Button-border-color-plain-active-success: var(--tv-color-act-success-bg-light-active); // 无边框
// success 主题时按钮激活的朴素文本色
--tv-Button-text-color-plain-active-success: var(--tv-color-act-success-plain-text-hover);
// success 主题时按钮激活的幽灵边框色
--tv-Button-border-color-ghost-active-success: var(--tv-color-act-success-border-active-1);

// warning 主题时按钮激活的背景色
--tv-Button-bg-color-active-warning: var(--tv-color-act-warning-bg-active);
// warning 主题时按钮激活的边框色
--tv-Button-border-color-active-warning: var(--tv-color-act-warning-border-active);
// warning 主题时按钮激活的文本色
--tv-Button-text-color-active-warning: var(--tv-color-act-warning-text-white-active);
// warning 主题时按钮激活的朴素背景色
--tv-Button-bg-color-plain-active-warning: var(--tv-color-act-warning-bg-light-active);
// warning 主题时按钮激活的朴素边框色
--tv-Button-border-color-plain-active-warning: var(--tv-color-act-warning-bg-light-active); // 无边框
// warning 主题时按钮激活的朴素文本色
--tv-Button-text-color-plain-active-warning: var(--tv-color-act-warning-plain-text-hover);
// warning 主题时按钮激活的幽灵边框色
--tv-Button-border-color-ghost-active-warning: var(--tv-color-act-warning-border-active-1);

// danger 主题时按钮激活的背景色
--tv-Button-bg-color-active-danger: var(--tv-color-act-danger-bg-active);
// danger 主题时按钮激活的边框色
--tv-Button-border-color-active-danger: var(--tv-color-act-danger-border-active);
// danger 主题时按钮激活的文本色
--tv-Button-text-color-active-danger: var(--tv-color-act-danger-text-white-active);
// danger 主题时按钮激活的朴素背景色
--tv-Button-bg-color-plain-active-danger: var(--tv-color-act-danger-bg-light-active);
// danger 主题时按钮激活的朴素边框色
--tv-Button-border-color-plain-active-danger: var(--tv-color-act-danger-bg-light-active);
// danger 主题时按钮激活的朴素文本色
--tv-Button-text-color-plain-active-danger: var(--tv-color-act-danger-plain-text-hover);
// danger 主题时按钮激活的幽灵边框色
--tv-Button-border-color-ghost-active-danger: var(--tv-color-act-danger-border-active-1);

// info 主题时按钮激活的背景色
--tv-Button-bg-color-active-info: var(--tv-color-act-info-bg-active);
// info 主题时按钮激活的边框色
--tv-Button-border-color-active-info: var(--tv-color-act-info-border-active);
// info 主题时按钮激活的文本色
--tv-Button-text-color-active-info: var(--tv-color-act-info-text-white-active);
// info 主题时按钮激活的朴素背景色
--tv-Button-bg-color-plain-active-info: var(--tv-color-act-info-bg-light-active);
// info 主题时按钮激活的朴素边框色
--tv-Button-border-color-plain-active-info: var(--tv-color-act-info-bg-light-active);
// info 主题时按钮激活的朴素文本色
--tv-Button-text-color-plain-active-info: var(--tv-color-act-info-plain-text-hover);
// info 主题时按钮激活的幽灵边框色
--tv-Button-border-color-ghost-active-info: var(--tv-color-act-info-border-active-1); // level3 结束------

Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/tag/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
// 标签在仅图标模式时，图标的大小
--tv-Tag-only-icon-font-size: 14px;
// 标签在仅图标模式时，标签的内边距
--tv-Tag-only-icon-padding: 0.5px;
--tv-Tag-only-icon-padding: 4px;

// 中等标签字号
--tv-Tag-font-size-medium: var(--tv-font-size-default);
Expand Down
Loading