Skip to content

Commit

Permalink
refactor(theme): [tooltip] refactor tooltip theme vars (#2257)
Browse files Browse the repository at this point in the history 
* refactor(theme): [tooltip] refactor tooltip theme vars

* refactor(theme): [tooltip] refactor tooltip theme vars
  • Loading branch information
@zzcr
zzcr authored Oct 14, 2024
1 parent e86e4c9 commit 1e1d4ba
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 81 deletions.
66 changes: 34 additions & 32 deletions packages/theme/src/tooltip/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,39 +17,40 @@
@tooltip-prefix-cls: ~'@{css-prefix}tooltip';

.@{tooltip-prefix-cls} {
.component-css-vars-tooltip();
.inject-Tooltip-vars();

font-family: var(--ti-tooltip-popper-font-family);
white-space: pre-wrap;

&:focus:hover,
&:focus:not(.focusing) {
outline-width: 0;
}

&__content-wrapper {
max-height: var(--ti-tooltip-content-max-height);
max-height: var(--tv-Tooltip-content-max-height);
overflow: auto;
}

&&__popper {
position: absolute;
left: -9999px;
border-radius: var(--ti-tooltip-popper-border-radius);
padding: var(--ti-tooltip-padding-vertical) var(--ti-tooltip-padding-horizontal);
font-size: var(--ti-tooltip-popper-font-size);
line-height: var(--ti-tooltip-popper-font-line-height);
border-radius: var(--tv-Tooltip-popper-border-radius);
padding: var(--tv-Tooltip-padding-y) var(--tv-Tooltip-padding-x);
font-size: var(--tv-Tooltip-popper-font-size);
line-height: var(--tv-Tooltip-popper-font-line-height);
min-width: 10px;
max-width: 450px;
z-index: 2000;
word-wrap: break-word;
box-shadow: var(--ti-tooltip-box-shadow);
box-shadow: var(--tv-Tooltip-box-shadow);

.popper__arrow {
position: absolute;
display: block;
// 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
width: var(--ti-tooltip-popper-border-width);
height: var(--ti-tooltip-popper-border-height);
background-color: var(--ti-tooltip-popper-border-color);
width: 12px;
height: 20px;
background-color: var(--tv-Tooltip-popper-border-color);
transform: rotateZ(45deg);
border-radius: 2px;
}
Expand Down Expand Up @@ -85,61 +86,62 @@
right: -3px;
}
}

&.is-normal {
.tooltip-type(
var(--ti-tooltip-popper-normal-text-color),
var(--ti-tooltip-popper-normal-bg-color),
var(--ti-tooltip-popper-normal-border-color)
var(--tv-Tooltip-popper-normal-text-color),
var(--tv-Tooltip-popper-normal-bg-color),
var(--tv-Tooltip-popper-normal-border-color)
);
}

&.is-info {
.tooltip-type(
var(--ti-tooltip-popper-info-text-color),
var(--ti-tooltip-popper-info-bg-color),
var(--ti-tooltip-popper-info-border-color)
var(--tv-Tooltip-popper-info-text-color),
var(--tv-Tooltip-popper-info-bg-color),
var(--tv-Tooltip-popper-info-border-color)
);
}

&.is-error {
.tooltip-type(
var(--ti-tooltip-popper-error-text-color),
var(--ti-tooltip-popper-error-bg-color),
var(--ti-tooltip-popper-error-border-color)
var(--tv-Tooltip-popper-error-text-color),
var(--tv-Tooltip-popper-error-bg-color),
var(--tv-Tooltip-popper-error-border-color)
);

.tooltip-validate-icon {
fill: var(--ti-tooltip-validate-icon-color);
fill: var(--tv-Tooltip-validate-icon-color);
margin-right: 8px;
}
}

&.is-warning {
.tooltip-type(
var(--ti-tooltip-popper-warning-text-color),
var(--ti-tooltip-popper-warning-bg-color),
var(--ti-tooltip-popper-warning-border-color)
var(--tv-Tooltip-popper-warning-text-color),
var(--tv-Tooltip-popper-warning-bg-color),
var(--tv-Tooltip-popper-warning-border-color)
);
}

&.is-success {
.tooltip-type(
var(--ti-tooltip-popper-success-text-color),
var(--ti-tooltip-popper-success-bg-color),
var(--ti-tooltip-popper-success-border-color)
var(--tv-Tooltip-popper-success-text-color),
var(--tv-Tooltip-popper-success-bg-color),
var(--tv-Tooltip-popper-success-border-color)
);
}

&.is-dark {
background: var(--ti-tooltip-popper-dark-bg-color);
color: var(--ti-tooltip-popper-dark-text-color);
background: var(--tv-Tooltip-popper-dark-bg-color);
color: var(--tv-Tooltip-popper-dark-text-color);
}

&.is-light {
.tooltip-type(
var(--ti-tooltip-popper-light-text-color),
var(--ti-tooltip-popper-light-bg-color),
var(--ti-tooltip-popper-light-border-color)
var(--tv-Tooltip-popper-light-text-color),
var(--tv-Tooltip-popper-light-bg-color),
var(--tv-Tooltip-popper-light-border-color)
);
}

Expand Down
81 changes: 32 additions & 49 deletions packages/theme/src/tooltip/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,88 +10,71 @@
*
*/

.component-css-vars-tooltip() {
// 弹框箭头的宽度,(hide)
--ti-tooltip-popper-border-width: 12px;
// 弹框箭头的高度,(hide)
--ti-tooltip-popper-border-height: 20px;
// 弹框箭头的圆角(hide)
--ti-tooltip-popper-border-radius: 2px;
.inject-Tooltip-vars() {
// 弹框三角默认边框色
--ti-tooltip-popper-border-color: #191919;
// 弹框字体行高(hide)
--ti-tooltip-popper-font-line-height: var(--ti-common-line-height-number, 1.5);
// 弹框字体(hide)
--ti-tooltip-popper-font-family: var(
--ti-common-font-family,
'Helvetica',
'Arial',
'PingFangSC-Regular',
'Hiragino Sans GB',
'Microsoft YaHei',
'微软雅黑',
'Microsoft JhengHei'
);
--tv-Tooltip-popper-border-color: var(--tv-color-border-active);
// 弹框字体行高
--tv-Tooltip-popper-font-line-height: var(--tv-line-height-number);
// 悬浮弹出框圆角
--ti-tooltip-popper-border-radius: 8px;
--tv-Tooltip-popper-border-radius: var(--tv-border-radius-lg);
// 悬浮弹出框字号
--ti-tooltip-popper-font-size: var(--ti-common-font-size-base, 14px);
--tv-Tooltip-popper-font-size: var(--tv-font-size-md);

// 正常背景色 (hide)
--ti-tooltip-popper-normal-bg-color: var(--ti-common-color-bg-dark-deep, #fff);
// 正常背景色
--tv-Tooltip-popper-normal-bg-color: var(--tv-color-bg-secondary);
// 文字提示正常文本色(hide)
--ti-tooltip-popper-normal-text-color: #191919;
--tv-Tooltip-popper-normal-text-color: var(--tv-color-text);
// 弹框正常边框色 (hide)
--ti-tooltip-popper-normal-border-color: var(--ti-common-color-bg-dark-deep, #fff);
--tv-Tooltip-popper-normal-border-color: var(--tv-Tooltip-popper-normal-bg-color);

// info类型弹框背景色
--ti-tooltip-popper-info-bg-color: #1476ff;
--tv-Tooltip-popper-info-bg-color: var(--tv-color-info-bg);
// info类型弹框文本色
--ti-tooltip-popper-info-text-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-info-text-color: var(--tv-color-info-text-white);
// info类型弹框三角边框色
--ti-tooltip-popper-info-border-color: #1476ff;
--tv-Tooltip-popper-info-border-color: var(--tv-color-info-border);

// error类型弹框背景色
--ti-tooltip-popper-error-bg-color: var(--ti-common-color-danger-normal, #f23030);
--tv-Tooltip-popper-error-bg-color: var(--tv-color-error-bg);
// error类型弹框文本色
--ti-tooltip-popper-error-text-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-error-text-color: var(--tv-color-error-text-white);
// error类型弹框三角边框色
--ti-tooltip-popper-error-border-color: var(--ti-common-color-danger-normal, #f23030);
--tv-Tooltip-popper-error-border-color: var(--tv-color-error-border);

// warning类型弹框背景色
--ti-tooltip-popper-warning-bg-color: var(--ti-common-color-warning-normal, #ff8800);
--tv-Tooltip-popper-warning-bg-color: var(--tv-color-warn-bg);
// warning类型弹框文本色
--ti-tooltip-popper-warning-text-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-warning-text-color: var(--tv-color-warn-text-white);
// warning类型弹框三角边框色
--ti-tooltip-popper-warning-border-color: var(--ti-common-color-warning-normal, #ff8800);
--tv-Tooltip-popper-warning-border-color: var(--tv-color-warn-border);

// success类型弹框背景色
--ti-tooltip-popper-success-bg-color: var(--ti-common-color-success-normal, #5cb300);
--tv-Tooltip-popper-success-bg-color: var(--tv-color-success-bg);
// success类型弹框文本色
--ti-tooltip-popper-success-text-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-success-text-color: var(--tv-color-success-text-white);
// success类型弹框三角边框色
--ti-tooltip-popper-success-border-color: var(--ti-common-color-success-normal, #5cb300);
--tv-Tooltip-popper-success-border-color: var(--tv-color-success-border);

// dark主题弹框背景色
--ti-tooltip-popper-dark-bg-color: #191919;
--tv-Tooltip-popper-dark-bg-color: var(--tv-color-bg-primary);
// dark主题弹框文本色
--ti-tooltip-popper-dark-text-color: #fff;
--tv-Tooltip-popper-dark-text-color: var(--tv-color-text-white);
// light主题弹框背景色
--ti-tooltip-popper-light-bg-color: var(--ti-common-color-light, #ffffff);
--tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-secondary);

// light主题|禁用弹框文本色
--ti-tooltip-popper-light-text-color: var(--ti-common-color-text-primary, #191919);
--tv-Tooltip-popper-light-text-color: var(--tv-color-text);
// light主题|禁用时弹框边框色
--ti-tooltip-popper-light-border-color: #fff;
--tv-Tooltip-popper-light-border-color: var(--tv-Tooltip-popper-light-bg-color);

// 弹框阴影
--ti-tooltip-box-shadow: 0px 5px 9px 0px rgba(51, 56, 84, 0.25);
--tv-Tooltip-box-shadow: var(--tv-shadow-2-down);
// 弹框垂直内边距
--ti-tooltip-padding-vertical: 12px;
--tv-Tooltip-padding-y: 12px;
// 弹框水平内边距
--ti-tooltip-padding-horizontal: 16px;
--tv-Tooltip-padding-x: 16px;
// 文字提示错误图标色
--ti-tooltip-validate-icon-color: var(--ti-common-color-error, #f23030);
--tv-Tooltip-validate-icon-color: var(--tv-color-error-icon);
// 文本内容容器最大高度
--ti-tooltip-content-max-height: 50vh;
--tv-Tooltip-content-max-height: 50vh;
}

0 comments on commit 1e1d4ba

Please sign in to comment.