Skip to content

Commit

Permalink
refactor(collapse): [collapse] refactor collapse theme vars (#2201)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzcr
zzcr authored Sep 29, 2024
1 parent 356de96 commit 3446b79
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 159 deletions.
4 changes: 2 additions & 2 deletions packages/theme/src/base/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,10 +304,10 @@
/* 2.6.1 常态 */
--tv-color-bg: var(--tv-base-color-common-3); // #f5f5f5 通用背景色 /选块的默认背景颜色、滑块手柄的背景颜色/表格表头/穿梭框头部背景颜色/下拉搜索的背景、折叠面板背景色
--tv-color-bg-primary: var(--tv-base-color-brand); // #191919 主要背景色（品牌色）：slider/step/流程图
--tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景
--tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色
--tv-color-bg-control: var(--tv-base-color-common-7); // #c2c2c2 单选/复选/开关/滑块默认背景色
--tv-color-bg-control-unactive: var(--tv-base-color-common-7); // #c2c2c2 开关组件-关闭状态-背景色
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/折叠面板/表格下展背景色
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
--tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2灰色标签背景色
--tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）

Expand Down
111 changes: 36 additions & 75 deletions packages/theme/src/collapse-item/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,59 +16,21 @@
@collapse-item-prefix-cls: ~'@{css-prefix}collapse-item';

.@{collapse-item-prefix-cls} {
.component-css-vars-collapse-item();
margin-top: var(--ti-collapse-item-margin-top);
background-color: var(--ti-collapse-item-bg-color);
border: var(--ti-collapse-item-border-length) solid var(--ti-collapse-item-border-color);
border-left-color: var(--ti-collapse-item-border-color-left);
border-right-color: var(--ti-collapse-item-border-color-right);
border-top-color: var(--ti-collapse-item-border-color-top);
border-radius: var(--ti-collapse-item-border-radius);

&:last-child {
margin-bottom: -1px;
}

&.is-disabled {
border-left-color: var(--ti-collapse-item-disabled-border-color-left);
border-right-color: var(--ti-collapse-item-disabled-border-color-right);
border-top-color: var(--ti-collapse-item-disabled-border-color-top);
}

&.is-disabled &__header {
color: var(--ti-collapse-item-disabled-text-color);
background-color: var(--ti-collapse-item-disabled-header-bg-color);
cursor: not-allowed;
}

&.is-disabled &__arrow svg {
fill: var(--ti-collapse-item-disabled-text-color);
}

&.is-disabled &__word-overflow {
cursor: not-allowed;
}
.inject-CollapseItem-vars();
background-color: var(--tv-CollapseItem-bg-color);
color: var(--tv-CollapseItem-text-color);
border-top: 1px solid var(--tv-CollapseItem-header-border-color);

&__header {
display: flex;
border: 1px solid var(--ti-collapse-item-header-border-color);
border-left-color: var(--ti-collapse-item-header-border-color-left);
border-right-color: var(--ti-collapse-item-header-border-color-right);
font-weight: var(--ti-collapse-item-header-font-weight);
align-items: center;
min-height: var(--ti-collapse-item-header-min-height);
background-color: var(--ti-collapse-item-header-bg-color);
color: var(--ti-collapse-item-text-color);
font-size: var(--ti-collapse-item-header-font-size);
min-height: 40px;
background-color: var(--tv-CollapseItem-header-bg-color);
font-size: var(--tv-CollapseItem-header-font-size);
outline: 0;
cursor: pointer;
transition: border-bottom-color 0.3s;
border-radius: var(--ti-collapse-item-border-radius);
padding: var(--ti-collapse-item-header-padding-vertical) var(--ti-collapse-item-header-padding-horizontal);

&.focusing:focus:not(:hover) {
color: var(--ti-collapse-item-header-focus-text-color);
}
padding: 12px 20px;

.@{collapse-item-prefix-cls}__word-overflow {
white-space: nowrap;
Expand All @@ -80,63 +42,62 @@
}

.@{collapse-item-prefix-cls}__arrow {
margin-right: var(--ti-collapse-item-arrow-margin-right);
font-size: var(--ti-collapse-item-arrow-font-size);
margin-right: 12px;
order: -1;
transition: transform 0.3s;
transform: var(--ti-collapse-item-arrow-transform);
transform: rotate(90deg);

svg {
font-size: var(--ti-collapse-item-icon-font-size);
fill: var(--ti-collapse-item-icon-color);
width: var(--tv-CollapseItem-icon-size);
height: var(--tv-CollapseItem-icon-size);
fill: var(--tv-CollapseItem-icon-color);
}
}

.@{collapse-item-prefix-cls}__title__right {
margin-left: auto;
color: var(--ti-collapse-item-title-right-color);
fill: var(--ti-collapse-item-title-right-fill);
color: var(--tv-CollapseItem-title-right-color);
fill: var(--tv-CollapseItem-title-right-icon-color);
}

&.is-active {
border-bottom-color: transparent;

.@{collapse-item-prefix-cls}__arrow {
transform: var(--ti-collapse-item-is-active-arrow-transform);

svg {
fill: var(--ti-collapse-item-is-active-arrow-text-color);
}
transform: rotate(-90deg);
}
}
}

&:hover:not(.is-disabled) {
.@{collapse-item-prefix-cls}__arrow {
&.is-disabled &__header {
color: var(--tv-CollapseItem-disabled-text-color);
background-color: var(--tv-CollapseItem-disabled-header-bg-color);
cursor: not-allowed;
}

&.is-disabled &__arrow svg {
fill: var(--tv-CollapseItem-disabled-text-color);
}

&.is-disabled &__word-overflow {
cursor: not-allowed;
}

&:not(.is-disabled) {
.@{collapse-item-prefix-cls}__arrow:hover {
svg {
fill: var(--ti-collapse-item-arrow-hover-text-color);
fill: var(--tv-CollapseItem-arrow-hover-text-color);
}
}
}

&__wrap {
will-change: height;
background-color: var(--ti-collapse-item-wrap-bg-color);
overflow: hidden;
box-sizing: border-box;
}

&__content {
padding-top: var(--ti-collapse-item-content-padding-top);
padding-left: var(--ti-collapse-item-content-padding-left);
padding-right: var(--ti-collapse-item-content-padding-right);
padding-bottom: var(--ti-collapse-item-content-padding-bottom);
font-size: var(--ti-collapse-item-content-font-size);
color: var(--ti-collapse-item-text-color);
border: 1px solid var(--ti-collapse-item-content-border-color);
border-right-color: var(--ti-collapse-item-content-border-color-right);
border-left-color: var(--ti-collapse-item-content-border-color-left);
border-top-color: var(--ti-collapse-item-content-border-color-top);
line-height: var(--ti-collapse-item-content-line-height);
padding: 24px 20px;
font-size: var(--tv-CollapseItem-content-font-size);
line-height: 1.5;
}
}
94 changes: 16 additions & 78 deletions packages/theme/src/collapse-item/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,93 +10,31 @@
*
*/

.component-css-vars-collapse-item() {
.inject-CollapseItem-vars() {
// 面板默认文本色
--ti-collapse-item-text-color: var(--ti-common-color-text-primary, #191919);
--tv-CollapseItem-text-color: var(--tv-color-text);
// 面板背景色
--ti-collapse-item-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
// 面板边框色
--ti-collapse-item-border-color: transparent;
// 面板边大小
--ti-collapse-item-border-length: var(--ti-common-border-radius-0, 0);
// 面板左边框色
--ti-collapse-item-border-color-left: var(--ti-collapse-item-border-color);
// 面板右边框色
--ti-collapse-item-border-color-right: var(--ti-collapse-item-border-color);
// 面板上边框色
--ti-collapse-item-border-color-top: var(--ti-collapse-item-border-color);
// 面板禁用时左边框色
--ti-collapse-item-disabled-border-color-left: var(--ti-collapse-item-border-color);
// 面板禁用时右边框色
--ti-collapse-item-disabled-border-color-right: var(--ti-collapse-item-border-color);
// 面板禁用时上边框色
--ti-collapse-item-disabled-border-color-top: var(--ti-collapse-item-border-color);
// 面板圆角
--ti-collapse-item-border-radius: 0;
// 面板顶部外边距
--ti-collapse-item-margin-top: calc(var(--ti-common-space-0, 0px) - 2px );
// 面板头部最小高度
--ti-collapse-item-header-min-height: var(--ti-common-size-height-medium, 40px);
--tv-CollapseItem-bg-color: var(--tv-color-bg);
// 面板头部向下箭头图标色
--ti-collapse-item-icon-color: #808080;
// 面板内容背景色
--ti-collapse-item-wrap-bg-color: var(--ti-common-bg-minor, #fafafa);
--tv-CollapseItem-icon-color: var(--tv-color-icon);
// 面板禁用文本色
--ti-collapse-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
// 面板禁用背景色
--ti-collapse-item-disabled-header-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0);
--tv-CollapseItem-disabled-text-color: var(--tv-color-icon-disabled);
// 面板头部背景色
--tv-CollapseItem-header-bg-color: var(--tv-color-bg-secondary);
// 面板头部禁用背景色
--tv-CollapseItem-disabled-header-bg-color: var(--tv-color-bg-disabled);
// 面板头部字号
--ti-collapse-item-header-font-size: var(--ti-common-font-size-base, 14px);
// 面板头部字重
--ti-collapse-item-header-font-weight: var(--ti-common-font-weight-4, normal);
// 面板头部的聚焦文本色(hide)
--ti-collapse-item-header-focus-text-color: var(--ti-common-color-text-primary, #191919);
// 面板头部箭头尺寸(hide)
--ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base, 14px);
// 面板头部箭头右外边距
--ti-collapse-item-arrow-margin-right: var(--ti-common-space-3x, 12px);
--tv-CollapseItem-header-font-size: var(--tv-font-size-md);
// 面板头部向上箭头图标色|箭头悬浮色
--ti-collapse-item-arrow-hover-text-color: var(--ti-base-color-brand, #191919);
--tv-CollapseItem-arrow-hover-text-color: var(--tv-color-icon-hover);
// 面板头部箭头尺寸
--ti-collapse-item-icon-font-size: var(--ti-common-font-size-2, 16px);
// 面板头部箭头旋转角度
--ti-collapse-item-arrow-transform: rotate(90deg);
// 面板展开头部箭头旋转角度
--ti-collapse-item-is-active-arrow-transform: rotate(-90deg);
// 面板展开头部箭头图标色
--ti-collapse-item-is-active-arrow-text-color: var(--ti-collapse-item-icon-color);
// 面板头部垂直内边距
--ti-collapse-item-header-padding-vertical: var(--ti-common-size-3x, 12px);
// 面板头部水平内边距
--ti-collapse-item-header-padding-horizontal: var(--ti-common-space-5x, 20px);
// 面板头部背景色
--ti-collapse-item-header-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
--tv-CollapseItem-icon-size: var(--tv-icon-size);
// 面板头部边框色
--ti-collapse-item-header-border-color: var(--ti-base-color-common-5, #f0f0f0);
// 面板头部左边框色
--ti-collapse-item-header-border-color-left: var(--ti-common-color-light, #ffffff);
// 面板头部右边框色
--ti-collapse-item-header-border-color-right: var(--ti-common-color-light, #ffffff);
// 面板内容边框色
--ti-collapse-item-content-border-color: var(--ti-common-color-light, #ffffff);
// 面板内容左边框色
--ti-collapse-item-content-border-color-left: var(--ti-collapse-item-content-border-color);
// 面板内容右边框色
--ti-collapse-item-content-border-color-right: var(--ti-collapse-item-content-border-color);
// 面板内容顶部边框色
--ti-collapse-item-content-border-color-top: var(--ti-common-color-light, #ffffff);
// 面板内容顶部内边距
--ti-collapse-item-content-padding-top: var(--ti-common-space-6x, 24px);
// 面板内容左内边距
--ti-collapse-item-content-padding-left: var(--ti-common-space-5x, 20px);
// 面板内容右内边距
--ti-collapse-item-content-padding-right: var(--ti-common-space-5x, 20px);
// 面板内容底部内边距
--ti-collapse-item-content-padding-bottom: var(--ti-common-space-6x, 24px);
--tv-CollapseItem-header-border-color: var(--tv-color-border-divider);
// 面板内容字号
--ti-collapse-item-content-font-size: var(--ti-common-font-size-base, 14px);
--tv-CollapseItem-content-font-size: var(--tv-font-size-md);
// 面板右侧标题颜色
--ti-collapse-item-title-right-color: #1476ff;
--tv-CollapseItem-title-right-color: var(--tv-color-text-link);
// 面板右侧图标颜色
--ti-collapse-item-title-right-fill: #1476ff;
--tv-CollapseItem-title-right-icon-color: var(--tv-color-icon-link);
}
5 changes: 2 additions & 3 deletions packages/theme/src/collapse/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
@collapse-prefix-cls: ~'@{css-prefix}collapse';

.@{collapse-prefix-cls} {
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
.component-css-vars-collapse();
.inject-Collapse-vars();
border-bottom: 1px solid var(--tv-Collapse-divider-line-color);
}
3 changes: 2 additions & 1 deletion packages/theme/src/collapse/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@
*
*/

.component-css-vars-collapse() {
.inject-Collapse-vars() {
--tv-Collapse-divider-line-color: var(--tv-color-border-divider);
}

0 comments on commit 3446b79

Please sign in to comment.