From cc94d5d4f8bdffd49b1c2913f8606d2524e4a81c Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sat, 28 Sep 2024 16:07:30 +0800 Subject: [PATCH] refactor(dialog-box): [dialog-box] refactor dialog-box theme vars --- packages/theme/src/dialog-box/index.less | 94 +++++++--------- packages/theme/src/dialog-box/vars.less | 130 ++++------------------- 2 files changed, 60 insertions(+), 164 deletions(-) diff --git a/packages/theme/src/dialog-box/index.less b/packages/theme/src/dialog-box/index.less index 3f93baef4c..0218cbabac 100644 --- a/packages/theme/src/dialog-box/index.less +++ b/packages/theme/src/dialog-box/index.less @@ -18,14 +18,14 @@ .@{dialog-box-prefix-cls} { position: absolute; - background: var(--ti-dialog-box-bg-color); + background: var(--tv-DialogBox-bg-color); border: 1px solid transparent; - border-radius: var(--ti-dialog-box-border-radius); - box-shadow: var(--ti-dialog-box-shadow); + border-radius: var(--tv-DialogBox-border-radius); + box-shadow: var(--tv-DialogBox-shadow); overflow: hidden; &__wrapper { - .component-css-vars-dialog-box(); + .inject-DialogBox-vars(); position: fixed; top: 0; @@ -34,8 +34,8 @@ left: 0; overflow: auto; margin: 0; - display: var(--ti-dialog-box-wrapper-display); - align-items: var(--ti-dialog-box-wrapper-align-items); + display: block; + align-items: normal; } &.is-fullscreen { @@ -60,17 +60,15 @@ } & &__header { - padding: var(--ti-dialog-box-head-padding-top) var(--ti-dialog-box-head-padding-horizontal) - var(--ti-dialog-box-head-padding-bottom); - background: var(--ti-dialog-box-bg-color); - font-weight: var(--ti-dialog-box-head-title-font-weight); + padding: 32px 32px 24px; + background: var(--tv-DialogBox-bg-color); + font-weight: var(--tv-DialogBox-head-title-font-weight); display: flex; position: relative; justify-content: space-between; align-items: center; - font-size: var(--ti-dialog-box-head-title-font-size); - color: var(--ti-dialog-box-head-title-text-color); - border-bottom: 1px solid var(--ti-dialog-box-head-border-bottom-color); + font-size: var(--tv-DialogBox-head-title-font-size); + color: var(--tv-DialogBox-head-title-text-color); .@{dialog-box-prefix-cls}__title { flex: 1; @@ -85,15 +83,10 @@ background: none; padding: 0; line-height: 1; - top: calc(0px - var(--ti-dialog-box-btn-tools-position-top)); - right: calc(0px - var(--ti-dialog-box-btn-tools-position-right)); + top: -12px; + right: -12px; cursor: pointer; - &:hover { - background-color: var(--ti-dialog-box-btn-background-color-hover); - border-radius: var(--ti-dialog-box-btn-border-radius); - } - & + .@{dialog-box-prefix-cls}__headerbtn { margin-left: 8px; } @@ -103,20 +96,20 @@ } .@{dialog-box-prefix-cls}__close { - fill: var(--ti-dialog-box-close-icon-color); - font-size: var(--ti-dialog-box-close-icon-size); + fill: var(--tv-DialogBox-close-icon-color); + font-size: var(--tv-DialogBox-close-icon-size); &:hover { - fill: var(--ti-dialog-box-close-icon-color-hover); + fill: var(--tv-DialogBox-close-icon-color-hover); } } .@{dialog-box-prefix-cls}__resize { - fill: var(--ti-dialog-box-resize-icon-color); - font-size: var(--ti-dialog-box-resize-icon-size); + fill: var(--tv-DialogBox-resize-icon-color); + font-size: var(--tv-DialogBox-resize-icon-size); &:hover { - fill: var(--ti-dialog-box-resize-icon-color-hover); + fill: var(--tv-DialogBox-resize-icon-color-hover); } } } @@ -124,9 +117,9 @@ & &__body { text-align: left; - padding: var(--ti-dialog-box-body-padding-vertical) var(--ti-dialog-box-body-padding-horizontal); - color: var(--ti-dialog-box-body-text-color); - font-size: var(--ti-dialog-box-body-font-size); + padding: 0 32px; + color: var(--tv-DialogBox-body-text-color); + font-size: var(--tv-DialogBox-body-font-size); .@{css-prefix}upload { overflow: hidden; @@ -143,13 +136,12 @@ } & &__footer { - padding: var(--ti-dialog-box-footer-padding-top) var(--ti-dialog-box-footer-padding-horizontal) - var(--ti-dialog-box-footer-margin-bottom); - text-align: var(--ti-dialog-box-footer-align); + padding: 24px 32px 32px; + text-align: right; box-sizing: border-box; .@{css-prefix}button { - min-width: var(--ti-dialog-box-footer-btn-min-width); + min-width: var(--tv-DialogBox-footer-btn-min-width); } .@{css-prefix}toolbar { @@ -161,46 +153,40 @@ // 抽屉 &.is-right-slide { - border-radius: var(--ti-dialog-box-drawer-radius); - min-width: var(--ti-dialog-box-drawer-min-width); - max-width: var(--ti-dialog-box-drawer-max-width); + border-radius: 0; + min-width: var(--tv-DialogBox-drawer-min-width); + max-width: var(--tv-DialogBox-drawer-max-width); display: flex; flex-direction: column; .@{dialog-box-prefix-cls}__header, .@{dialog-box-prefix-cls}__footer { - width: calc(100% - var(--ti-dialog-box-drawer-padding-left) - var(--ti-dialog-box-drawer-padding-right)); - margin-left: var(--ti-dialog-box-drawer-padding-left); - margin-right: var(--ti-dialog-box-drawer-padding-right); + width: calc(100% - 64px); + margin-left: 32px; + margin-right: 32px; } .@{dialog-box-prefix-cls}__header { - padding: var(--ti-dialog-box-drawer-header-padding-top) var(--ti-dialog-box-drawer-header-padding-right) - var(--ti-dialog-box-drawer-header-padding-bottom) var(--ti-dialog-box-drawer-header-padding-left); - border-bottom: 1px solid var(--ti-dialog-box-head-divider-border-color); + padding: 32px 0 20px; + border-bottom: 1px solid var(--tv-DialogBox-head-divider-border-color); &btn { - right: calc( - var(--ti-dialog-box-btn-position-right) - var(--ti-dialog-box-drawer-padding-right) - - (var(--ti-dialog-box-btn-width) - var(--ti-dialog-box-close-icon-size)) / 2 - ); + right: -16px; } } .@{dialog-box-prefix-cls}__body { flex: 1; overflow: auto; - color: var(--ti-dialog-box-drawer-body-color); - border-bottom: 1px solid var(--ti-dialog-box-drawer-divider-border-color); - padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right) - var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left); - } + color: var(--tv-DialogBox-drawer-body-color); + border-bottom: 1px solid var(--tv-DialogBox-drawer-divider-border-color); + padding: 0 32px; + } .@{dialog-box-prefix-cls}__footer { - padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right) - var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left); - text-align: var(--ti-dialog-box-drawer-footer-text-align); + padding: 24px 0 32px; + text-align: right; } } } diff --git a/packages/theme/src/dialog-box/vars.less b/packages/theme/src/dialog-box/vars.less index 84fbc21e1a..02814f19b0 100644 --- a/packages/theme/src/dialog-box/vars.less +++ b/packages/theme/src/dialog-box/vars.less @@ -10,136 +10,46 @@ * */ -.component-css-vars-dialog-box() { +.inject-DialogBox-vars() { // 对话框背景色 - --ti-dialog-box-bg-color: var(--ti-common-color-bg-white-normal, #ffffff); + --tv-DialogBox-bg-color: var(--tv-color-bg-secondary); // 对话框圆角 - --ti-dialog-box-border-radius: var(--ti-common-border-radius-4, 8px); + --tv-DialogBox-border-radius: var(--tv-border-radius-lg); // 对话框阴影 - --ti-dialog-box-shadow: var(--ti-common-shadow-4-down, 0 8px 24px 0 rgba(0, 0, 0, 0.16)); - - // 头部边框色(hide) - --ti-dialog-box-head-border-color: var(--ti-common-color-line-normal, #c2c2c2); - // 头部文本色(hide) - --ti-dialog-box-head-text-color: var(--ti-common-color-text-primary, #191919); - // 头部上内边距 - --ti-dialog-box-head-padding-top: var(--ti-common-space-8x, 32px); - // 头部水平内边距 - --ti-dialog-box-head-padding-horizontal: var(--ti-common-space-8x, 32px); - // 头部下内边距 - --ti-dialog-box-head-padding-bottom: var(--ti-common-space-6x, 24px); + --tv-DialogBox-shadow: var(--tv-shadow-4-down); // 头部字号 - --ti-dialog-box-head-title-font-size: var(--ti-common-font-size-4, 20px); + --tv-DialogBox-head-title-font-size: var(--tv-font-size-heading-md); // 头部字重 - --ti-dialog-box-head-title-font-weight: var(--ti-common-font-weight-7, bold); + --tv-DialogBox-head-title-font-weight: var(--tv-font-weight-bold); // 头部文本色 - --ti-dialog-box-head-title-text-color: var(--ti-common-color-text-primary, #191919); - // 头部底边框颜色 - --ti-dialog-box-head-border-bottom-color: var(--ti-common-color-transparent, transparent); - // 头部字体图标色(hide) - --ti-dialog-box-head-font-icon-color: var(--ti-common-color-icon-normal, #808080); - // 头部字体图标悬浮颜色(hide) - --ti-dialog-box-head-font-icon-color-hover: var(--ti-common-color-icon-hover, #191919); - // 头部主体色(hide) - --ti-dialog-box-head-body-text-color: var(--ti-common-color-text-primary, #191919); - // 头部主体字号(hide) - --ti-dialog-box-head-body-font-size: var(--ti-common-font-size-1, 14px); + --tv-DialogBox-head-title-text-color: var(--tv-color-text); - // 关闭按钮宽度 - --ti-dialog-box-btn-width: var(--ti-common-size-8x, 32px); // 关闭按钮高度 - --ti-dialog-box-btn-height: var(--ti-dialog-box-btn-width); - // 关闭按钮圆角 - --ti-dialog-box-btn-border-radius: var(--ti-common-border-radius-1, 2px); + --tv-DialogBox-btn-height: 32px; // 关闭按钮图标尺寸 - --ti-dialog-box-close-icon-size: var(--ti-common-font-size-5, 24px); + --tv-DialogBox-close-icon-size: 24px; // 关闭按钮图标色 - --ti-dialog-box-close-icon-color: var(--ti-common-color-icon-normal, #808080); + --tv-DialogBox-close-icon-color: var(--tv-color-icon); // 关闭按钮悬浮图标色 - --ti-dialog-box-close-icon-color-hover: var(--ti-common-color-icon-hover, #191919); - // 关闭按钮悬浮背景色 - --ti-dialog-box-btn-background-color-hover: none; - // 关闭按钮与上边框的距离(hide) - --ti-dialog-box-btn-position-top: var(--ti-common-space-5x, 20px); - // 关闭按钮与右边框的距离(hide) - --ti-dialog-box-btn-position-right: var(--ti-common-space-5x, 20px); + --tv-DialogBox-close-icon-color-hover: var(--tv-color-icon-hover); // 内容字号 - --ti-dialog-box-body-font-size: var(--ti-common-font-size-base, 14px); + --tv-DialogBox-body-font-size: var(--tv-font-size-md); // 内容字体色 - --ti-dialog-box-body-text-color: var(--ti-common-color-text-secondary, #595959); + --tv-DialogBox-body-text-color: var(--tv-color-text-secondary); // 右侧弹窗内容字体色 - --ti-dialog-box-drawer-body-color: var(--ti-common-color-text-primary, #191919); - // 内容垂直内边距 - --ti-dialog-box-body-padding-vertical: var(--ti-common-space-0, 0px); - // 内容水平内边距 - --ti-dialog-box-body-padding-horizontal: var(--ti-common-space-8x, 32px); - - // 底部上内边距 - --ti-dialog-box-footer-padding-top: var(--ti-common-space-6x, 24px); - // 底部水平内边距 - --ti-dialog-box-footer-padding-horizontal: var(--ti-common-space-8x, 32px); - // 底部下内边距 - --ti-dialog-box-footer-margin-bottom: var(--ti-common-space-8x, 32px); + --tv-DialogBox-drawer-body-color: var(--tv-color-text); // 抽屉最小宽度 - --ti-dialog-box-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50); + --tv-DialogBox-drawer-min-width: 500px; // 抽屉最大宽度 - --ti-dialog-box-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100); - // 抽屉左内边距 - --ti-dialog-box-drawer-padding-left: var(--ti-common-space-8x, 32px); - // 抽屉右内边距 - --ti-dialog-box-drawer-padding-right: var(--ti-common-space-8x, 32px); - // 抽屉头部上内边距 - --ti-dialog-box-drawer-header-padding-top: var(--ti-common-space-8x, 32px); - // 抽屉头部下内边距 - --ti-dialog-box-drawer-header-padding-bottom: var(--ti-common-space-5x, 20px); - // 抽屉头部左内边距 - --ti-dialog-box-drawer-header-padding-left: var(--ti-common-space-0, 0px); - // 抽屉头部右内边距 - --ti-dialog-box-drawer-body-padding-right: var(--ti-common-space-8x, 32px); - // 抽屉内容上内边距 - --ti-dialog-box-drawer-body-padding-top: var(--ti-common-space-0, 0px); - // 抽屉内容下内边距 - --ti-dialog-box-drawer-body-padding-bottom: var(--ti-common-space-0, 0px); - // 抽屉内容左内边距 - --ti-dialog-box-drawer-body-padding-left: var(--ti-common-space-8x, 32px); - // 抽屉内容右内边距 - --ti-dialog-box-drawer-header-padding-right: var(--ti-common-space-0, 0px); - // 抽屉底部文本对齐方式 - --ti-dialog-box-drawer-footer-text-align: right; - // 抽屉底部上内边距 - --ti-dialog-box-drawer-footer-padding-top: var(--ti-common-space-6x, 24px); - // 抽屉底部下内边距 - --ti-dialog-box-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px); - // 抽屉底部左内边距 - --ti-dialog-box-drawer-footer-padding-left: var(--ti-common-space-0, 0px); - // 抽屉底部右内边距 - --ti-dialog-box-drawer-footer-padding-right: var(--ti-common-space-0, 0px); - // 抽屉底部左外边距 - --ti-dialog-box-drawer-footer-margin-left: var(--ti-common-space-8x, 32px); - // 抽屉底部右外边距 - --ti-dialog-box-drawer-footer-margin-right: var(--ti-common-space-10x, 40px); + --tv-DialogBox-drawer-max-width: 1000px; // 抽屉内容与底部边框颜色 - --ti-dialog-box-drawer-divider-border-color: var(--ti-common-color-line-dividing, #f0f0f0); - // 抽屉头部与底部边框颜色 - --ti-dialog-box-header-divider-border-color: var(--ti-common-color-transparent, transparent); - // 抽屉边框圆角 - --ti-dialog-box-drawer-radius: var(--ti-common-space-0, 0px); - // 弹窗布局模式(hide) - --ti-dialog-box-wrapper-display: block; - // 弹窗垂直布局(hide) - --ti-dialog-box-wrapper-align-items: normal; - // 底部布局显示 - --ti-dialog-box-footer-align: right; + --tv-DialogBox-drawer-divider-border-color: var(--tv-color-border-divider); // 缩放按钮 - --ti-dialog-box-resize-icon-color: var(--ti-common-color-icon-normal, #808080); + --tv-DialogBox-resize-icon-color: var(--tv-color-icon); // 缩放按钮悬浮状态 - --ti-dialog-box-resize-icon-color-hover: var(--ti-common-color-icon-normal, #808080); + --tv-DialogBox-resize-icon-color-hover: var(--tv-color-icon-hover); // 缩放按钮大小 - --ti-dialog-box-resize-icon-size: var(--ti-common-font-size-2, 16px); - // 按钮距离顶部距离 - --ti-dialog-box-btn-tools-position-top: var(--ti-common-size-3x, 12px); - // 按钮距离右侧距离 - --ti-dialog-box-btn-tools-position-right: var(--ti-common-size-3x, 12px); + --tv-DialogBox-resize-icon-size: var(--tv-icon-size); }