diff --git a/packages/theme/src/base/vars.less b/packages/theme/src/base/vars.less index 181a876e94..b92c805da2 100644 --- a/packages/theme/src/base/vars.less +++ b/packages/theme/src/base/vars.less @@ -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 表头背景色(如果只有表格使用，就转成组件级变量） diff --git a/packages/theme/src/collapse-item/index.less b/packages/theme/src/collapse-item/index.less index 5564449596..a7c321c3d8 100644 --- a/packages/theme/src/collapse-item/index.less +++ b/packages/theme/src/collapse-item/index.less @@ -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; @@ -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; } } diff --git a/packages/theme/src/collapse-item/vars.less b/packages/theme/src/collapse-item/vars.less index 1f9e736370..d9cbc889c5 100644 --- a/packages/theme/src/collapse-item/vars.less +++ b/packages/theme/src/collapse-item/vars.less @@ -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); } diff --git a/packages/theme/src/collapse/index.less b/packages/theme/src/collapse/index.less index 3cd9d1b7dc..d63e92a3e4 100644 --- a/packages/theme/src/collapse/index.less +++ b/packages/theme/src/collapse/index.less @@ -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); } diff --git a/packages/theme/src/collapse/vars.less b/packages/theme/src/collapse/vars.less index b0f5dba18c..75d0e54279 100644 --- a/packages/theme/src/collapse/vars.less +++ b/packages/theme/src/collapse/vars.less @@ -10,5 +10,6 @@ * */ -.component-css-vars-collapse() { +.inject-Collapse-vars() { + --tv-Collapse-divider-line-color: var(--tv-color-border-divider); }