From 7eefb8bde6c81ba289e3e5ac6de1baef0bed1027 Mon Sep 17 00:00:00 2001 From: You-Hw-Y <1664677472@qq.com> Date: Tue, 8 Oct 2024 20:00:02 -0700 Subject: [PATCH] feat(card): [card] Adapting to the SMB themes --- packages/theme/src/card/index.less | 78 +++++++++++++++--------------- packages/theme/src/card/vars.less | 67 ++++++++++++------------- 2 files changed, 71 insertions(+), 74 deletions(-) diff --git a/packages/theme/src/card/index.less b/packages/theme/src/card/index.less index 13416dd544..99c7e3badc 100644 --- a/packages/theme/src/card/index.less +++ b/packages/theme/src/card/index.less @@ -19,73 +19,73 @@ .@{card-prefix-cls} { .component-css-vars-amount(); - background-color: var(--ti-card-bg-color); + background-color: var(--tv-Card-bg-color); border: 1px solid; line-height: 1.5; overflow: hidden; - min-width: var(--ti-card-min-width); + min-width: auto; &:hover { - box-shadow: var(--ti-card-box-shadow); + box-shadow: none; } // size尺寸管理 &.@{card-prefix-cls}--large { - border-radius: var(--ti-card-large-border-radius); + border-radius: var(--tv-Card-large-border-radius); } &.@{card-prefix-cls}--medium { - border-radius: var(--ti-card-medium-border-radius); + border-radius: var(--tv-Card-medium-border-radius); } &.@{card-prefix-cls}--small { - border-radius: var(--ti-card-small-border-radius); + border-radius: var(--tv-Card-small-border-radius); } &.@{card-prefix-cls}--mini { - border-radius: var(--ti-card-mini-border-radius); + border-radius: var(--tv-Card-mini-border-radius); } &.@{card-prefix-cls}--large-width { - width: var(--ti-card-large-width); + width: var(--tv-Card-large-width); } &.@{card-prefix-cls}--medium-width { - width: var(--ti-card-medium-width); + width: var(--tv-Card-medium-width); } &.@{card-prefix-cls}--small-width { - width: var(--ti-card-small-width); + width: var(--tv-Card-small-width); } &.@{card-prefix-cls}--mini-width { - width: var(--ti-card-mini-width); + width: var(--tv-Card-mini-width); } // status状态管理 &.@{card-prefix-cls}--success { - border-color: var(--ti-card-success-border-color); + border-color: var(--tv-Card-success-border-color); } &.@{card-prefix-cls}--warning { - border-color: var(--ti-card-warning-border-color); + border-color: var(--tv-Card-warning-border-color); } &.@{card-prefix-cls}--alerting { - border-color: var(--ti-card-alerting-border-color); + border-color: var(--tv-Card-alerting-border-color); } &.@{card-prefix-cls}--danger { - border-color: var(--ti-card-danger-border-color); + border-color: var(--tv-Card-danger-border-color); } &.@{card-prefix-cls}--default { - border-color: var(--ti-card-default-border-color); + border-color: var(--tv-Card-default-border-color); } // 选中 禁用 &.@{card-prefix-cls}--item-checked { - border-color: var(--ti-card-checked-border-color); + border-color: var(--tv-Card-checked-border-color); } &.@{card-prefix-cls}--item-checkbox-checked { position: relative; @@ -101,17 +101,17 @@ border-bottom: 40px solid transparent; border-right: 40px solid #1476ff; border-top-right-radius: 6px; - display: var(--ti-checkbox-button-checked-display); + display: flex; } &.@{card-prefix-cls}--item-checkbox-checked::before { - display: var(--ti-checkbox-button-checked-display); + display: flex; right: 5px; top: 1px; box-sizing: content-box; content: ''; border: 0.5px solid #fff; - border-width: 0 1px 1px 0; + border-width: 0 3px 3px 0; border-left: 0; border-top: 0; height: 16px; @@ -128,7 +128,7 @@ } &.@{card-prefix-cls}--disabled { - background-color: var(--ti-card-disabled-bg-color); + background-color: var(--tv-Card-disabled-bg-color); } // body 样式 @@ -150,6 +150,8 @@ width: 100%; aspect-ratio: 16/9; background-size: cover; + border-top-left-radius: 8px; + border-top-right-radius: 8px; } } @@ -164,19 +166,19 @@ flex: 1 1 0%; &.@{card-prefix-cls}--large-padding { - padding: var(--ti-card-large-body-padding); + padding: var(--tv-Card-large-body-padding); } &.@{card-prefix-cls}--medium-padding { - padding: var(--ti-card-medium-body-padding); + padding: var(--tv-Card-medium-body-padding); } &.@{card-prefix-cls}--small-padding { - padding: var(--ti-card-small-body-padding); + padding: var(--tv-Card-small-body-padding); } &.@{card-prefix-cls}--mini-padding { - padding: var(--ti-card-mini-body-padding); + padding: var(--tv-Card-mini-body-padding); } & .@{card-prefix-cls}--logo__head { @@ -207,17 +209,17 @@ } & .@{card-prefix-cls}--logo__title--p { - font-size: var(--ti-card-title-font-size); - font-weight: var(--ti-card-title-font-weight); + font-size: var(--tv-Card-title-font-size); + font-weight: var(--tv-Card-title-font-weight); margin-right: 8px; - margin-bottom: var(--ti-card-title-mg-bottom); + margin-bottom: var(--tv-Card-title-mg-bottom); line-height: 22px; - color: var(--ti-card-title-text-color); + color: var(--tv-Card-title-text-color); } & .@{card-prefix-cls}--logo__main { - font-size: var(--ti-card-main-font-size); - color: var(--ti-card-main-text-color); + font-size: var(--tv-Card-main-font-size); + color: var(--tv-Card-main-text-color); } & .@{card-prefix-cls}--logo__main-type-logo { @@ -244,12 +246,12 @@ display: flex; justify-content: space-around; align-items: center; - border-top: 1px solid var(--ti-card-option-top-border-color); - color: var(--ti-card-option-text-color); - font-size: var(--ti-card-option-font-size); + border-top: 1px solid var(--tv-Card-option-top-border-color); + color: var(--tv-Card-option-text-color); + font-size: var(--tv-Card-option-font-size); .@{card-prefix-cls}__footer-options-disabled { - color: var(--ti-card-option-disabled-text-color); + color: var(--tv-Card-option-disabled-text-color); cursor: not-allowed; } @@ -263,7 +265,7 @@ } .@{card-prefix-cls}__footer-options-icon-disabled { - fill: var(--ti-card-option-disabled-text-color); + fill: var(--tv-Card-option-disabled-text-color); } .@{card-prefix-cls}__footer-options-span { @@ -274,7 +276,7 @@ .@{card-prefix-cls}__footer-options-dropdown { .@{card-prefix-cls}__footer-more { margin-left: 4px; - color: var(--ti-card-title-text-color); + color: var(--tv-Card-footer-more-text-color); } .@{card-prefix-cls}__footer-dropdown-item { @@ -283,7 +285,7 @@ } .@{card-prefix-cls}__footer-dropdown-item-disabled { - color: var(--ti-card-option-disabled-text-color); + color: var(--tv-Card-option-disabled-text-color); cursor: not-allowed; } } diff --git a/packages/theme/src/card/vars.less b/packages/theme/src/card/vars.less index da80600c2e..b722441874 100644 --- a/packages/theme/src/card/vars.less +++ b/packages/theme/src/card/vars.less @@ -12,76 +12,71 @@ .component-css-vars-amount() { // 卡片背景色 - --ti-card-bg-color: var(--ti-common-color-bg-navigation, #ffffff); - // 卡片阴影 - --ti-card-box-shadow: none; + --tv-Card-bg-color: var(--tv-color-bg-secondary); - // 卡片最小宽度 - --ti-card-min-width: var(--ti-common-size-auto, auto); // 大尺寸卡片的宽度 - --ti-card-large-width: calc(var(--ti-common-size-base, 4px) * 144); + --tv-Card-large-width: calc(var(--tv-size-base, 4px) * 144); // 中尺寸卡片的宽度 - --ti-card-medium-width: calc(var(--ti-common-size-base, 4px) * 96); + --tv-Card-medium-width: calc(var(--tv-size-base, 4px) * 96); // 小尺寸卡片的宽度 - --ti-card-small-width: calc(var(--ti-common-size-base, 4px) * 72); + --tv-Card-small-width: calc(var(--tv-size-base, 4px) * 72); // 迷你尺寸卡片的宽度 - --ti-card-mini-width: calc(var(--ti-common-size-base, 4px) * 54); + --tv-Card-mini-width: calc(var(--tv-size-base, 4px) * 54); // 大尺寸卡片的圆角 - --ti-card-large-border-radius: var(--ti-common-border-radius-4, 8px); + --tv-Card-large-border-radius: var(--tv-border-radius-lg); // 中尺寸卡片的圆角 - --ti-card-medium-border-radius: var(--ti-common-border-radius-2, 4px); + --tv-Card-medium-border-radius: var(--tv-border-radius-sm); // 小尺寸卡片的圆角 - --ti-card-small-border-radius: var(--ti-common-border-radius-2, 4px); + --tv-Card-small-border-radius: var(--tv-border-radius-sm); // 迷你尺寸卡片的圆角 - --ti-card-mini-border-radius: var(--ti-common-border-radius-1, 2px); + --tv-Card-mini-border-radius: var(--tv-border-radius-xs); // 成功状态的卡片的边框颜色 - --ti-card-success-border-color: var(--ti-base-color-success-4, #3ac295); + --tv-Card-success-border-color: var(--tv-color-act-success-border); // 警告状态的卡片的边框颜色 - --ti-card-warning-border-color: var(--ti-base-color-warn-5, #e37d29); + --tv-Card-warning-border-color: var(--tv-color-act-warning-border); // 报警状态的卡片的边框颜色 - --ti-card-alerting-border-color: var(--ti-base-color-warn-3, #fac20a); + --tv-Card-alerting-border-color: #fac20a; // 危险状态的卡片的边框颜色 - --ti-card-danger-border-color: var(--ti-base-color-error-4, #de504e); + --tv-Card-danger-border-color: var(--tv-color-act-danger-border); // 默认状态的卡片的边框颜色 - --ti-card-default-border-color: var(--ti-common-color-light, #ffffff); - + --tv-Card-default-border-color:#ffffff; // 选中状态的卡片的边框颜色 - --ti-card-checked-border-color: var(--ti-common-color-text-highlight, #1476ff); + --tv-Card-checked-border-color: var(--tv-color-border-active-control); // 禁用状态的卡片的背景颜色 - --ti-card-disabled-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0); + --tv-Card-disabled-bg-color: var(--tv-color-bg-disabled); // 大尺寸卡片的logo状态下，body区域的padding值 - --ti-card-large-body-padding: var(--ti-common-space-6x, 24px); + --tv-Card-large-body-padding: 32px; // 中尺寸卡片的logo状态下，body区域的padding值 - --ti-card-medium-body-padding: var(--ti-common-space-6x, 24px); + --tv-Card-medium-body-padding: 24px; // 小尺寸卡片的logo状态下，body区域的padding值 - --ti-card-small-body-padding: var(--ti-common-space-4x, 16px); + --tv-Card-small-body-padding: var(--tv-space-xl, 16px); // 迷你尺寸卡片的logo状态下，body区域的padding值 - --ti-card-mini-body-padding: var(--ti-common-space-3x, 12px); + --tv-Card-mini-body-padding: var(--tv-space-lg, 12px); // 卡片的标题的字体大小 - --ti-card-title-font-size: var(--ti-common-font-size-2, 16px); + --tv-Card-title-font-size: var(--tv-font-size-lg); // 卡片的标题的字体颜色 - --ti-card-title-text-color: var(--ti-common-color-selected-text-color, #191919); + --tv-Card-title-text-color: var(--tv-color-act-primary-text); // 卡片的标题的字重 - --ti-card-title-font-weight: bold; + --tv-Card-title-font-weight: var(--tv-font-weight-bold); // 卡片的正文的字体大小 - --ti-card-main-font-size: var(--ti-common-font-size-1, 14px); + --tv-Card-main-font-size: var(--tv-font-size-md); // 卡片的正文的字体颜色 - --ti-card-main-text-color: var(--ti-common-color-text-weaken, #808080); + --tv-Card-main-text-color: var(--tv-color-text-weaken); // 卡片的选项的文本色 - --ti-card-option-text-color: var(--ti-common-color-selected-text-color, #191919); + --tv-Card-option-text-color: var(--tv-color-bg-primary); // 卡片的选项的文本大小 - --ti-card-option-font-size: var(--ti-common-font-size-2, 16px); + --tv-Card-option-font-size: var(--tv-font-size-lg); // 卡片的选项的文本大小 - --ti-card-option-top-border-color: var(--ti-common-color-primary-disabled, #f0f0f0); + --tv-Card-option-top-border-color: var(--tv-color-bg-header); // 卡片的选项禁用时的文本色 - --ti-card-option-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2); + --tv-Card-option-disabled-text-color: var(--tv-color-text-disabled); // 卡片的'更多'的字体颜色 - --ti-card-footer-more-text-color: var(--ti-base-color-common-9, #181818); + --tv-Card-footer-more-text-color: var(--tv-color-act-primary-text); // 卡片标题下边距 - --ti-card-title-mg-bottom: var(--ti-common-space-4x, 16px); + --tv-Card-title-mg-bottom: var(--tv-space-xl); }