Skip to content

Commit

Permalink
fix(button): add ghost's cssvars for button (#2235)
Browse files Browse the repository at this point in the history 
* fix(button): add ghost's cssvars for button.  ghost and plain have the same priority

* fix(button): fix

* fix(button): fix reviews

* fix(button): fix
  • Loading branch information
@shenjunjian
shenjunjian authored Oct 11, 2024
1 parent ff7bd0d commit 8928877
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 44 deletions.
20 changes: 18 additions & 2 deletions packages/theme/src/base/reset.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@
@import '../custom.less';
@import './basic-var.less';

// 为了防止这些图标失去默认值，需要全局设置默认值

// 为了防止这些图标失去默认值，需要全局设置默认值 todo:以下是否有必要保留？
.tiny-icon-success {
fill: #5cb300;
}
Expand All @@ -34,6 +33,23 @@
.tiny-icon-text-type {
fill: #9185f0;
}

// .tiny-icon-loading 类名的动画效果。 它出现在多个组件中，故抽取到一起。
.@{css-prefix-iconfont}-loading {
line-height: 1;
animation: rotating 2s linear infinite;
}

@keyframes rotating {
0% {
transform: rotateZ(0deg);
}

100% {
transform: rotateZ(360deg);
}
}

// 高亮节点
.tiny-hl-query-node {
color: var(--ti-common-color-text-highlight) !important;
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/base/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,8 @@
--tv-color-border-active-control: var(--tv-base-color-brand-6); // #1476ff 主色蓝，单选/复选选中的边框色
--tv-color-border-disabled: var(--tv-base-color-common-6); // #dbdbdb 线条禁用色
--tv-color-border-secondary: var(--tv-base-color-common-9); // #595959 线条-次要色：次要按钮边框默认色
--tv-color-border-ghost: var(--tv-base-color-common-8); // #808080
--tv-color-border-ghost-active: var(--tv-base-color-common-6); // #dbdbdb

/* 2.7.2 分割线 */
--tv-color-border-divider: var(--tv-base-color-common-4); // #f0f0f0 分割线1（较长分割线场景）
Expand Down
71 changes: 57 additions & 14 deletions packages/theme/src/button/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,18 @@
background-color: e(@bg);
border-color: e(@border);
}
// 幽灵 按钮 优先级为：两级类名
.color-ghost-mixin(@theme) {
@c: %('var(--tv-Button-text-color-ghost-%a)', @theme);
@border: %('var(--tv-Button-border-color-ghost-%a)', @theme);

color: e(@c);
border-color: e(@border);
}
// 激活态： 叠加到主题和plain 状态上。
.color-active-mixin(@theme, @plain) {
@bg: %('var(--tv-Button-bg-color%a-active-%a)', @plain, @theme);
@border: %('var(--tv-Button-border%a-color-active-%a)', @plain, @theme);
@border: %('var(--tv-Button-border-color%a-active-%a)', @plain, @theme);

&:active,
&:focus,
Expand All @@ -98,69 +106,104 @@
border-color: e(@border);
}
}
// 激活态： 叠加到 ghost 状态上。
.color-ghost-active-mixin(@theme) {
@border: %('var(--tv-Button-border-color-ghost-active-%a)', @theme);

&:active,
&:focus,
&:hover,
&.is-active {
border-color: e(@border);
}
}

&.@{button-prefix-cls}--default {
.color-theme-mixin(default);
.color-active-mixin(default, e(''));

&.is-plain,
&.is-ghost {
&.is-plain {
.color-plain-mixin(default);
.color-active-mixin(default, -plain);
}

&.is-ghost {
.color-ghost-mixin(default);
.color-ghost-active-mixin(default);
}
}
&.@{button-prefix-cls}--primary {
.color-theme-mixin(primary);
.color-active-mixin(primary, e(''));

&.is-plain,
&.is-ghost {
&.is-plain {
.color-plain-mixin(primary);
.color-active-mixin(primary, -plain);
}

&.is-ghost {
.color-ghost-mixin(primary);
.color-ghost-active-mixin(primary);
}
}
&.@{button-prefix-cls}--success {
.color-theme-mixin(success);
.color-active-mixin(success, e(''));

&.is-plain,
&.is-ghost {
&.is-plain {
.color-plain-mixin(success);
.color-active-mixin(success, -plain);
}

&.is-ghost {
.color-ghost-mixin(success);
.color-ghost-active-mixin(success);
}
}
&.@{button-prefix-cls}--warning {
.color-theme-mixin(warning);
.color-active-mixin(warning, e(''));

&.is-plain,
&.is-ghost {
&.is-plain {
.color-plain-mixin(warning);
.color-active-mixin(warning, -plain);
}

&.is-ghost {
.color-ghost-mixin(warning);
.color-ghost-active-mixin(warning);
}
}
&.@{button-prefix-cls}--danger {
.color-theme-mixin(danger);
.color-active-mixin(danger, e(''));

&.is-plain,
&.is-ghost {
&.is-plain {
.color-plain-mixin(danger);
.color-active-mixin(danger, -plain);
}

&.is-ghost {
.color-ghost-mixin(danger);
.color-ghost-active-mixin(danger);
}
}
&.@{button-prefix-cls}--info {
.color-theme-mixin(info);
.color-active-mixin(info, e(''));

&.is-plain,
&.is-ghost {
&.is-plain {
.color-plain-mixin(info);
.color-active-mixin(info, -plain);
}

&.is-ghost {
.color-ghost-mixin(info);
.color-ghost-active-mixin(info);
}
}

// ghost： 默认继承plain的状态， 但是bg 强制为透明，比禁用还高 优先级为：六级类名
// ghost：bg 强制为透明，比禁用还高 优先级为：六级类名
&.is-ghost.is-ghost.is-ghost.is-ghost.is-ghost.is-ghost {
background-color: var(--tv-Button-bg-color-ghost);
}
Expand Down
50 changes: 47 additions & 3 deletions packages/theme/src/button/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,9 +169,41 @@
// info 主题时按钮朴素边框色
--tv-Button-border-color-plain-info: var(--tv-color-act-info-border-active-1);

// 幽灵态和plain是平级的关系. 如果同时存在，优先级不能保证稳定。

// 幽灵时按钮背景色
--tv-Button-bg-color-ghost: transparent; // 只影响 bg 和 text-color, 且bg全部为透明.

// 默认时按钮幽灵文本色
--tv-Button-text-color-ghost-default: var(--tv-color-text-secondary);
// 默认时按钮幽灵边框色
--tv-Button-border-color-ghost-default: var(--tv-color-border-ghost);

// primary 主题时按钮幽灵文本色
--tv-Button-text-colorghostn-primary: var(--tv-color-act-primary-text);
// primary 主题时按钮幽灵边框色
--tv-Button-border-color-ghost-primary: var(--tv-color-act-primary-border-light);

// success 主题时按钮幽灵文本色
--tv-Button-text-color-ghost-success: var(--tv-color-act-success-text);
// success 主题时按钮幽灵边框色
--tv-Button-border-color-ghost-success: var(--tv-color-act-success-border);

// warning 主题时按钮幽灵文本色
--tv-Button-text-color-ghost-warning: var(--tv-color-act-warning-text);
// warning 主题时按钮幽灵边框色
--tv-Button-border-color-ghost-warning: var(--tv-color-act-warning-border);

// danger 主题时按钮幽灵文本色
--tv-Button-text-color-ghost-danger: var(--tv-color-act-danger-text);
// danger 主题时按钮幽灵边框色
--tv-Button-border-color-ghost-danger: var(--tv-color-act-danger-border);

// info 主题时按钮幽灵文本色
--tv-Button-text-color-ghost-info: var(--tv-color-act-info-text);
// info 主题时按钮幽灵边框色
--tv-Button-border-color-ghost-info: var(--tv-color-act-info-border);

//------------------------------------------------------------------------------ // level 2结束 ----------------

// 默认时按钮激活的背景色
Expand All @@ -181,7 +213,9 @@
// 默认时按钮激活的朴素背景色
--tv-Button-bg-color-plain-active-default: var(--tv-color-bg);
// 默认时按钮激活的朴素边框色
--tv-Button-border-color-plain-active-default: var(--tv-color-bg); // 朴素激活都无边框
--tv-Button-border-color-plain-active-default: var(--tv-color-bg); // 朴素激活都无边框，所以等于背景色。
// 默认时按钮激活的幽灵边框色
--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);
Expand All @@ -191,6 +225,8 @@
--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-border-color-ghost-active-primary: var(--tv-color-act-primary-border-light-active-1);

// success 主题时按钮激活的背景色
--tv-Button-bg-color-active-success: var(--tv-color-act-success-bg-active);
Expand All @@ -200,6 +236,8 @@
--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-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);
Expand All @@ -209,6 +247,8 @@
--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-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);
Expand All @@ -218,6 +258,8 @@
--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-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);
Expand All @@ -226,10 +268,12 @@
// 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); // level3 结束------
--tv-Button-border-color-plain-active-info: var(--tv-color-act-info-bg-light-active);
// info 主题时按钮激活的幽灵边框色
--tv-Button-border-color-ghost-active-info: var(--tv-color-act-info-border-active-1); // level3 结束------

// 禁用时按钮文本色
--tv-Button-text-color-disabled: var(--tv-color-text-disabled); // 目前主题， disabled优先级高，所以变量少
--tv-Button-text-color-disabled: var(--tv-color-text-disabled); // 目前规则下，disabled优先级最高，所以变量少
// 禁用时按钮背景色
--tv-Button-bg-color-disabled: var(--tv-color-bg-disabled);
// 禁用时按钮边框色
Expand Down
34 changes: 9 additions & 25 deletions packages/theme/src/float-button/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,10 @@
border-image: initial;
border-radius: var(--ti-float-button-border-radius);
background: var(--ti-float-button-normal-background-color);
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
box-shadow:
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
transition:
border 0.3s ease 0s,
color 0.3s ease 0s,
Expand All @@ -54,7 +57,7 @@
vertical-align: text-top;
}

&>img {
& > img {
margin-right: 4px;
vertical-align: middle;
}
Expand Down Expand Up @@ -129,7 +132,7 @@
var(--ti-float-button-normal-disabled-bg-color));
}

&+& {
& + & {
margin-left: 8px;
}

Expand Down Expand Up @@ -159,12 +162,9 @@
.@{svg-prefix-cls} {
fill: var(--ti-float-button-normal-text-color);
}


}
}


&.is-icon {
display: inline-flex;
justify-content: center;
Expand Down Expand Up @@ -457,7 +457,7 @@
var(--ti-float-button-size-large-min-width),
);

&+& {
& + & {
margin-left: var(--ti-float-button-size-large-margin-left);
}
}
Expand All @@ -469,7 +469,7 @@
var(--ti-float-button-size-medium-min-width),
);

&+& {
& + & {
margin-left: var(--ti-float-button-size-medium-margin-left);
}
}
Expand All @@ -481,7 +481,7 @@
var(--ti-float-button-size-small-min-width),
);

&+& {
& + & {
margin-left: var(--ti-float-button-size-small-margin-left);
}
}
Expand All @@ -494,19 +494,3 @@
);
}
}

.@{css-prefix-iconfont}-loading {
font-size: var(--ti-common-font-size-1);
line-height: 1;
animation: rotating 2s linear infinite;
}

@keyframes rotating {
0% {
transform: rotateZ(0deg);
}

100% {
transform: rotateZ(360deg);
}
}

0 comments on commit 8928877

Please sign in to comment.