From 9159fee16a51624777d7f2e9bf4466ca46a7a9f5 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sat, 12 Oct 2024 11:41:06 +0800 Subject: [PATCH 1/2] refactor(theme): [color-picker] refactor color-picker theme vars --- packages/theme/src/color-picker/index.less | 127 ++--------- packages/theme/src/color-picker/vars.less | 46 ++-- .../theme/src/color-select-panel/index.less | 207 ++++++++---------- .../theme/src/color-select-panel/vars.less | 40 +--- .../vue/src/color-select-panel/package.json | 5 +- .../vue/src/color-select-panel/src/pc.vue | 8 +- 6 files changed, 135 insertions(+), 298 deletions(-) diff --git a/packages/theme/src/color-picker/index.less b/packages/theme/src/color-picker/index.less index 21aae94787..137f3801af 100644 --- a/packages/theme/src/color-picker/index.less +++ b/packages/theme/src/color-picker/index.less @@ -4,15 +4,15 @@ @color-picker-prefix-cls: ~'@{css-prefix}color-picker'; .@{color-picker-prefix-cls} { - .component-css-vars-color-picker(); + .inject-ColorPicker-vars(); position: relative; width: 32px; height: 32px; - border-radius: var(--ti-color-picker-border-radius-sm); - border: var(--ti-color-picker-border-weight) solid var(--ti-color-picker-border-color); + border-radius: var(--tv-ColorPicker-border-radius-xs); + border: 1px solid var(--tv-ColorPicker-border-color); box-sizing: content-box; - padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal); + padding: var(--tv-ColorPicker-padding-y) var(--tv-ColorPicker-padding-x); cursor: pointer; &__inner { @@ -21,125 +21,26 @@ height: 100%; align-items: center; justify-content: center; - border-radius: var(--ti-color-picker-border-radius-sm); - background: var(--ti-color-picker-bg-color); + border-radius: var(--tv-ColorPicker-border-radius-xs); } - &__wrapper { - display: flex; - flex-direction: column; - position: absolute; - max-width: 300px; - z-index: var(--ti-color-picker__select__wrapper-zindex); - margin-top: var(--ti-color-picker-spacing); - background: var(--ti-color-picker__wrapper-bg); - gap: var(--ti-color-picker-spacing); - padding: var(--ti-color-picker-spacing-2x); - box-shadow: var(--ti-color-picker-shadow); - - &__tools { - display: flex; - - .tiny-input { - flex: 1 0 0; - } - - .tiny-button-group { - flex: 0 0 auto; - } - } - - &__inner { - display: flex; - gap: 12px; - &__color-select { - width: 280px; - height: 180px; - position: relative; - - .white { - background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); - } - - .black { - background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); - } - - .white, - .black { - position: absolute; - inset: 0; - } - - .cursor { - position: absolute; - width: 12px; - height: 12px; - border-radius: 100%; - border: 1px solid white; - background: rgba(0, 0, 0, .15); - box-shadow: inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006; - } - } - - &__hue-select { - position: relative; - width: 18px; - border-radius: var(--ti-color-picker-border-radius-xs); - background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); - - div { - position: absolute; - top: 0; - width: 100%; - height: 4px; - background: #fff; - box-shadow: 0 0 2px rgba(0, 0, 0, .6); - border-radius: 1px; - } - } - } - - &__alpha { - position: relative; - width: 100%; - height: 20px; - border-radius: var(--ti-color-picker-border-radius-xs); - margin-top: var(--ti-color-picker-spacing-2x); - &__slider { - width: 100%; - height: 100%; - } - - &__thumb { - width: 4px; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: #fff; - box-shadow: 0 0 2px rgba(0, 0, 0, .6); - border-radius: 1px; - } - } - } &--large { - width: var(--ti-color-picker-size-large-width); - height: var(--ti-color-picker-size-large-height); + width: var(--tv-ColorPicker-size-large-width); + height: var(--tv-ColorPicker-size-large-height); } &--small { - width: var(--ti-color-picker-size-small-width); - height: var(--ti-color-picker-size-small-height); + width: var(--tv-ColorPicker-size-small-width); + height: var(--tv-ColorPicker-size-small-height); } &--medium { - width: var(--ti-color-picker-size-medium-width); - height: var(--ti-color-picker-size-medium-height); + width: var(--tv-ColorPicker-size-medium-width); + height: var(--tv-ColorPicker-size-medium-height); } &--mini { - width: var(--ti-color-picker-size-mini-width); - height: var(--ti-color-picker-size-mini-height); + width: var(--tv-ColorPicker-size-mini-width); + height: var(--tv-ColorPicker-size-mini-height); } -} \ No newline at end of file +} diff --git a/packages/theme/src/color-picker/vars.less b/packages/theme/src/color-picker/vars.less index 99706da58d..38a692fdbe 100644 --- a/packages/theme/src/color-picker/vars.less +++ b/packages/theme/src/color-picker/vars.less @@ -1,46 +1,34 @@ -.component-css-vars-color-picker() { - // 默认按钮背景色(hide) - --ti-color-picker-bg-color: var(--ti-common-color-transparent, transparent); +.inject-ColorPicker-vars() { // 按钮边框色 - --ti-color-picker-border-color: var(--ti-base-color-common-2, #808080); - // 按钮边框厚度 - --ti-color-picker-border-weight: var(--ti-common-border-weight-normal, 1px); - // 没用(hide) - --ti-color-picker-border-radius-xs: var(--ti-common-border-radius-normal, 6px); + --tv-ColorPicker-border-color: var(--tv-color-border-ghost); // 按钮边框圆角 - --ti-color-picker-border-radius-sm: var(--ti-common-border-radius-1, 2px); - // 没用(hide) - --ti-color-picker-border-radius: var(--ti-common-border-radius-2, 4px); + --tv-ColorPicker-border-radius-md: var(--tv-border-radius-md); + // 按钮边框小圆角 + --tv-ColorPicker-border-radius-xs: var(--tv-border-radius-xs); // 按钮垂直内边距 - --ti-color-picker-padding-vertical: var(--ti-common-space-base, 4px); + --tv-ColorPicker-padding-y: var(--tv-space-sm); // 按钮水平内边距 - --ti-color-picker-padding-horizontal: var(--ti-common-space-base, 4px); - // 没用(hide) - --ti-color-picker-spacing-2x: var(--ti-common-space-2x, 8px); - // 没用(hide) - --ti-color-picker-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); - // 没用(hide) - --ti-color-picker__select__wrapper-zindex: 1000; + --tv-ColorPicker-padding-x: var(--tv-space-sm); // 没用(hide) - --ti-color-picker__wrapper-bg: var(--ti-common-color-bg-white-emphasize, #f0f0f0); + --tv-ColorPicker-spacing-2x: var(--tv-space-md); // 超大尺寸高度 - --ti-color-picker-size-large-height: var(--ti-common-size-16x, 64px); + --tv-ColorPicker-size-large-height: var(--tv-size-height-xl); // 超大尺寸宽度 - --ti-color-picker-size-large-width: var(--ti-common-size-16x, 64px); + --tv-ColorPicker-size-large-width: var(--tv-size-height-xl); // 中等尺寸高度 - --ti-color-picker-size-medium-height: var(--ti-common-size-12x, 48px); + --tv-ColorPicker-size-medium-height: var(--tv-size-height-lg); // 中等尺寸最小宽度 - --ti-color-picker-size-medium-width: var(--ti-common-size-12x, 48px); + --tv-ColorPicker-size-medium-width: var(--tv-size-height-lg); // 小型高度 - --ti-color-picker-size-small-height: var(--ti-common-size-9x, 36px); + --tv-ColorPicker-size-small-height: var(--tv-size-height-sm); // 小尺寸宽度 - --ti-color-picker-size-small-width: var(--ti-common-size-9x, 36px); + --tv-ColorPicker-size-small-width: var(--tv-size-height-sm); // 迷你尺寸按钮高度 - --ti-color-picker-size-mini-height: var(--ti-common-size-6x, 24px); + --tv-ColorPicker-size-mini-height: var(--tv-size-height-xs); // 迷你尺寸宽度 - --ti-color-picker-size-mini-width: var(--ti-common-size-6x, 24px); -} \ No newline at end of file + --tv-ColorPicker-size-mini-width: var(--tv-size-height-xs); +} diff --git a/packages/theme/src/color-select-panel/index.less b/packages/theme/src/color-select-panel/index.less index f18e7c8d8c..fec2ff98bb 100644 --- a/packages/theme/src/color-select-panel/index.less +++ b/packages/theme/src/color-select-panel/index.less @@ -3,156 +3,127 @@ @color-select-panel-prefix-cls: ~'@{css-prefix}color-select-panel'; .@{color-select-panel-prefix-cls} { - .component-css-vars-color-select-panel(); + .inject-ColorSelectPanel-vars(); + display: flex; + flex-direction: column; + position: absolute; + max-width: 264px; + z-index: 10; + background: var(--tv-ColorSelectPanel-bg-color); + gap: var(--tv-ColorSelectPanel-spacing); + padding: var(--tv-ColorSelectPanel-padding-y) var(--tv-ColorSelectPanel-padding-x); + box-shadow: var(--tv-ColorSelectPanel-box-shadow); + + &__tools { display: flex; - flex-direction: column; - position: absolute; - max-width: 264px; - z-index: var(--ti-color-select-panel__wrapper-zindex); - background: var(--ti-color-select-panel-bg-color); - gap: var(--ti-color-select-panel-spacing); - padding: var(--ti-color-select-panel-padding-vertical) var(--ti-color-select-panel-padding-horizontal); - box-shadow: var(--ti-color-select-panel-box-shadow); - - &__tools { - display: flex; - line-height: var(--ti-color-select-panel-tools-line-height); - .tiny-input { - flex: 1 0 0; - } + line-height: var(--tv-ColorSelectPanel-tools-line-height); - .tiny-button-group { - margin: var(--ti-color-select-panel-btn-margin); - flex: 0 0 auto; - > .tiny-button { - border-color: var(--ti-color-select-panel-btn-border-color); - border-radius: var(--ti-color-select-panel-border-radius-xs); - &:hover { - border-color: var(--ti-color-select-panel-btn-border-hover-color); - } - } - } + .tiny-input { + flex: 1 0 0; } - &__inner { - display: flex; - gap: 12px; - &__color-select { - width: 220px; - height: 142px; - position: relative; + &-btns { + margin-left: 8px; + } + } - .white { - background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); - } + &__inner { + display: flex; + gap: 12px; - .black { - background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); - } + &__color-select { + width: 220px; + height: 142px; + position: relative; - .white, - .black { - position: absolute; - inset: 0; - } + .white { + background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); + } - .cursor { - position: absolute; - width: 12px; - height: 12px; - border-radius: 100%; - border: 1px solid white; - background: rgba(0, 0, 0, .15); - box-shadow: inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006; - } + .black { + background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); } - &__hue-select { - position: relative; - width: 8px; - border-radius: var(--ti-color-select-panel-border-radius-xs); - background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); - - div { - position: absolute; - top: 0; - width: 100%; - height: 4px; - background: #fff; - box-shadow: 0 0 2px rgba(0, 0, 0, .6); - border-radius: 1px; - } + .white, + .black { + position: absolute; + inset: 0; + } + + .cursor { + position: absolute; + width: 12px; + height: 12px; + border-radius: 100%; + border: 1px solid white; + background: rgba(0, 0, 0, 0.15); + box-shadow: + inset 0 0 1px 1px #0000004d, + 0 0 1px 2px #0006; } } - &__alpha { + &__hue-select { position: relative; - width: 240px; - height: 8px; - border-radius: var(--ti-color-select-panel-border-radius-xs); - margin-top: var(--ti-color-select-panel-alpha-margin-top); - &__slider { - width: 100%; - height: 100%; - border-radius: var(--ti-color-select-panel-border-radius-xs); - } + width: 8px; + border-radius: var(--tv-ColorSelectPanel-border-radius-lg); + background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); - &__thumb { - width: 4px; - height: 100%; + div { position: absolute; top: 0; - left: 0; + width: 100%; + height: 4px; background: #fff; - box-shadow: 0 0 2px rgba(0, 0, 0, .6); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); border-radius: 1px; } } + } - .tiny-collapse { - border-bottom: 0; - .tiny-collapse-item__header { - color: var(--ti-color-select-panel-collapse-color); - border: 0; - background: transparent; - padding: 0; - .tiny-collapse-item { - background: transparent; - border: none; - padding-left: 0; - padding-right: 0; - } + &__alpha { + position: relative; + width: 240px; + height: 8px; + border-radius: var(--tv-ColorSelectPanel-border-radius-lg); + margin-top: var(--tv-ColorSelectPanel-alpha-margin-top); + + &__slider { + width: 100%; + height: 100%; + border-radius: var(--tv-ColorSelectPanel-border-radius-lg); + } + + &__thumb { + width: 4px; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: #fff; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); + border-radius: 1px; } - .tiny-collapse-item__content{ - background: transparent; - padding-left: 0; - padding-right: 0; + } + + .tiny-collapse { + .tiny-collapse-item__content { border: 0; + padding: 12px; .@{color-select-panel-prefix-cls}__history, - .@{color-select-panel-prefix-cls}__predefine{ + .@{color-select-panel-prefix-cls}__predefine { display: flex; flex-wrap: wrap; height: auto; - gap: var(--ti-color-select-panel-spacing); - &__color-block{ + gap: var(--tv-ColorSelectPanel-spacing); + + &__color-block { width: 20px; height: 20px; - border-radius: var(--ti-color-select-panel-border-radius-sm); + border-radius: var(--tv-ColorSelectPanel-border-radius-sm); margin: 0 4px 4px 0; } } - .tiny-collapse-item__arrow { - display: none; - } - .tiny-collapse-item__wrap { - background: transparent; - } - } - .tiny-collapse-item__wrap{ - background: transparent; - } - .tiny-collapse-item__arrow { - display: none; } } -} \ No newline at end of file +} diff --git a/packages/theme/src/color-select-panel/vars.less b/packages/theme/src/color-select-panel/vars.less index 3f7d821331..d8c84e6167 100644 --- a/packages/theme/src/color-select-panel/vars.less +++ b/packages/theme/src/color-select-panel/vars.less @@ -1,38 +1,18 @@ -.component-css-vars-color-select-panel() { - // 弹出框背景色(hide) - --ti-color-select-panel-bg-color: var(--ti-common-color-transparent, transparent); - // 弹出框边框色(hide) - --ti-color-select-panel-border-color: var(--ti-base-color-common-2, #808080); - // 弹出框边框厚度(hide) - --ti-color-select-panel-border-weight: var(--ti-common-border-weight-normal, 1px); +.inject-ColorSelectPanel-vars() { // 弹出框右侧色调框圆角 - --ti-color-select-panel-border-radius-xs: var(--ti-common-border-radius-4, 8px); + --tv-ColorSelectPanel-border-radius-lg: var(--tv-border-radius-lg); // 历史记录展开框颜色块圆角 - --ti-color-select-panel-border-radius-sm: var(--ti-common-border-radius-2, 4px); - // 无用(hide) - --ti-color-select-panel-border-radius: var(--ti-common-border-radius-2, 4px); - // 弹出框各元素快间隙(hide) - --ti-color-select-panel-gap: var(--ti-common-space-base, 4px); + --tv-ColorSelectPanel-border-radius-sm: var(--tv-border-radius-sm); // 弹出框垂直内边距 - --ti-color-select-panel-padding-vertical: var(--ti-common-space-2x, 8px); + --tv-ColorSelectPanel-padding-y: var(--tv-space-md); // 弹出框水平内边距 - --ti-color-select-panel-padding-horizontal: var(--ti-common-space-2x, 8px); + --tv-ColorSelectPanel-padding-x: var(--tv-space-md); // alpha选择条上外边距 - --ti-color-select-panel-alpha-margin-top: var(--ti-common-space-2x, 8px); + --tv-ColorSelectPanel-alpha-margin-top: var(--tv-space-md); // 弹出框阴影 - --ti-color-select-panel-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); - // 弹出框元素层级(hide) - --ti-color-select-panel__wrapper-zindex: 10; + --tv-ColorSelectPanel-box-shadow: var(--tv-shadow-2-down); // 弹出框背景色 - --ti-color-select-panel-bg-color: var(--ti-common-color-light, #ffffff); - // 弹窗按钮颜色 - --ti-color-select-panel-btn-border-color: var(--ti-common-color-line-normal, #c2c2c2); - // 弹窗按钮悬浮颜色 - --ti-color-select-panel-btn-border-hover-color: var(--ti-common-color-border-hover, #191919); + --tv-ColorSelectPanel-bg-color: var(--tv-color-bg-secondary); // 颜色工具栏高度 - --ti-color-select-panel-tools-line-height: var(--ti-common-size-height-medium, 40px); - // 弹窗按钮外边距 - --ti-color-select-panel-btn-margin: 8px; - // 弹窗折叠字体颜色 - --ti-color-select-panel-collapse-color: var(--ti-common-color-primary-normal, #191919); -} \ No newline at end of file + --tv-ColorSelectPanel-tools-line-height: 40px; +} diff --git a/packages/vue/src/color-select-panel/package.json b/packages/vue/src/color-select-panel/package.json index eb10e7252b..90db1c92b7 100644 --- a/packages/vue/src/color-select-panel/package.json +++ b/packages/vue/src/color-select-panel/package.json @@ -13,8 +13,7 @@ "@opentiny/vue-button": "workspace:~", "@opentiny/vue-input": "workspace:~", "@opentiny/vue-collapse": "workspace:~", - "@opentiny/vue-collapse-item": "workspace:~", - "@opentiny/vue-button-group": "workspace:~" + "@opentiny/vue-collapse-item": "workspace:~" }, "license": "MIT" -} \ No newline at end of file +} diff --git a/packages/vue/src/color-select-panel/src/pc.vue b/packages/vue/src/color-select-panel/src/pc.vue index 8296eb3562..6391544250 100644 --- a/packages/vue/src/color-select-panel/src/pc.vue +++ b/packages/vue/src/color-select-panel/src/pc.vue @@ -4,14 +4,14 @@
- +
{{ t('ui.colorSelectPanel.cancel') }} - + {{ t('ui.colorSelectPanel.confirm') }} - +
@@ -52,7 +52,6 @@