diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue index d74b7c700..1b18c3ebd 100644 --- a/packages/common/component/MetaCodeEditor.vue +++ b/packages/common/component/MetaCodeEditor.vue @@ -303,7 +303,7 @@ export default { height: 24px; padding: 4px; border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color); - border-radius: 6px; + border-radius: var(--te-base-border-radius-1); &:hover { border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color); diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue index a155ed76e..7618ab0bb 100644 --- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue +++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue @@ -2,35 +2,31 @@
- - + - {{ item.label }} - - - - - + + {{ item.label }} + + + + + + +
{ .tabs-wrap { display: flex; justify-content: space-between; + background-color: var(--te-common-bg-container); + border-radius: 4px; + .tiny-button-group { + display: flex; + .button-wrap { + display: flex; + align-items: center; + } + } + .tiny-button.tiny-button.tiny-button--default { margin: 0; padding: 0; border: none; - background-color: var(--te-common-bg-container); line-height: 14px; min-width: 20px; + background-color: var(--te-common-bg-container); color: var(--te-common-text-weaken); &:hover { @@ -225,7 +231,6 @@ const change = (item) => { text-align: center; cursor: pointer; position: relative; - background-color: var(--te-common-bg-container); .label-text { width: 100%; height: 12px; @@ -240,7 +245,6 @@ const change = (item) => { justify-content: center; align-items: center; height: 24px; - background-color: var(--te-common-bg-container); color: var(--te-common-text-weaken); &:hover { @@ -290,14 +294,16 @@ const change = (item) => { padding: 4px 12px; background-color: var(--te-common-bg-default); - &:hover { - background-color: var(--te-common-bg-container); - border-radius: 4px; + &:hover, + &:active { + background-color: var(--te-common-bg-prompt); color: var(--te-common-text-primary); } } } .border-right { + display: inline-block; + height: 12px; border-right: 1px solid var(--te-common-border-default); } diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue index 78fd53590..63b148e44 100644 --- a/packages/settings/styles/src/components/background/BackgroundGroup.vue +++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue @@ -554,7 +554,7 @@ export default { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } } diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue index 5eb2432e7..453511126 100644 --- a/packages/settings/styles/src/components/border/BorderGroup.vue +++ b/packages/settings/styles/src/components/border/BorderGroup.vue @@ -90,7 +90,7 @@ :class="{ 'is-setting': isBorderSetting(), 'set-border-style': true }" @click="openSetting(BORDER_PROPERTY.Border, $event)" > - 边框 + 边框
@@ -574,7 +574,6 @@ export default { .radius-label { flex: 0 0 48px; - padding: 0 2px; line-height: 24px; color: var(--ti-lowcode-component-setting-panel-label-color); } @@ -655,10 +654,6 @@ export default { .border-label { color: var(--te-common-text-secondary); flex-shrink: 0; - - .border-title { - margin-left: 2px; - } } .border-container { display: flex; @@ -724,7 +719,7 @@ export default { span { border-radius: 2px; color: var(--ti-lowcode-style-setting-label-color); - background: var(--ti-lowcode-style-setting-label-bg); + background: var(--te-common-bg-text-emphasize); cursor: pointer; } } diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue index b9af5b6ed..dcecfdc05 100644 --- a/packages/settings/styles/src/components/classNamesContainer/index.vue +++ b/packages/settings/styles/src/components/classNamesContainer/index.vue @@ -516,7 +516,7 @@ const handleDeleteCurSelector = () => { display: flex; padding: 3px; border: 1px solid var(--ti-lowcode-className-selector-container-border-color); - border-radius: 6px; + border-radius: var(--te-base-border-radius-1); cursor: pointer; } @@ -528,7 +528,7 @@ const handleDeleteCurSelector = () => { min-width: 0; padding: 1px 10px; border: 1px solid var(--ti-lowcode-className-selector-container-border-color); - border-radius: 6px; + border-radius: var(--te-base-border-radius-1); border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: 12px; @@ -670,7 +670,7 @@ const handleDeleteCurSelector = () => { flex: 4; min-width: 84px; border: 1px solid var(--ti-lowcode-className-selector-container-border-color); - border-radius: 6px; + border-radius: var(--te-base-border-radius-1); border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue index 7fc575ec9..0f878d105 100644 --- a/packages/settings/styles/src/components/effects/EffectGroup.vue +++ b/packages/settings/styles/src/components/effects/EffectGroup.vue @@ -539,7 +539,7 @@ export default { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } diff --git a/packages/settings/styles/src/components/inputs/InputSelect.vue b/packages/settings/styles/src/components/inputs/InputSelect.vue index 642a50a2a..1dd947a3a 100644 --- a/packages/settings/styles/src/components/inputs/InputSelect.vue +++ b/packages/settings/styles/src/components/inputs/InputSelect.vue @@ -118,7 +118,7 @@ export default { .input-select { display: flex; align-items: center; - background-color: var(--ti-lowcode-tabs-bg); + background-color: var(--te-common-bg-default); border-radius: 3px; transition: 0.3s; &.focus { diff --git a/packages/settings/styles/src/components/layout/GridBox.vue b/packages/settings/styles/src/components/layout/GridBox.vue index 9a2e0a497..62db085a9 100644 --- a/packages/settings/styles/src/components/layout/GridBox.vue +++ b/packages/settings/styles/src/components/layout/GridBox.vue @@ -552,7 +552,7 @@ export default { } .is-setting { color: var(--ti-lowcode-style-setting-label-color); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } :deep(.reference-wrapper) { width: 100%; diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue index 815becf72..4a05418de 100644 --- a/packages/settings/styles/src/components/layout/LayoutGroup.vue +++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue @@ -127,7 +127,6 @@ export default { .display-label { flex: 0 0 50px; - padding: 0 3px; line-height: 24px; color: var(--te-common-text-secondary); @@ -139,7 +138,7 @@ export default { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } } diff --git a/packages/settings/styles/src/components/position/PositionGroup.vue b/packages/settings/styles/src/components/position/PositionGroup.vue index 671173925..c0165b29a 100644 --- a/packages/settings/styles/src/components/position/PositionGroup.vue +++ b/packages/settings/styles/src/components/position/PositionGroup.vue @@ -522,7 +522,7 @@ export default { align-items: center; justify-content: center; &.is-setting { - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } &.is-show { @@ -603,7 +603,7 @@ export default { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } .lr-path-color { diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue index d5022c39d..2684c6b5d 100644 --- a/packages/settings/styles/src/components/size/SizeGroup.vue +++ b/packages/settings/styles/src/components/size/SizeGroup.vue @@ -468,7 +468,6 @@ span { .size-label { flex: 0 0 52px; - padding-left: 2px; margin-right: 2px; line-height: 28px; color: var(--te-common-text-secondary); @@ -485,7 +484,6 @@ span { } .overflow-label { flex: 0 0 54px; - padding: 0 2px; line-height: 24px; color: var(--te-common-text-secondary); } @@ -495,7 +493,7 @@ span { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } .is-setting { @@ -545,7 +543,6 @@ span { } .fit-label { flex: 0 0 54px; - padding: 0 2px; line-height: 28px; color: var(--te-common-text-secondary); span { diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue index 347d44111..50e34929f 100644 --- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue +++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue @@ -513,7 +513,7 @@ export default { justify-content: center; &.is-setting { - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } &.is-show { diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue index c906e2dba..f4b3654e0 100644 --- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue +++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue @@ -150,7 +150,7 @@ export default { &:hover, &.active { color: var(--ti-lowcode-style-setting-label-color); - background: var(--ti-lowcode-style-setting-label-bg); + background: var(--te-common-bg-text-emphasize); } } @@ -187,7 +187,7 @@ export default { &:hover, &.active { color: var(--ti-lowcode-style-setting-label-color); - background: var(--ti-lowcode-style-setting-label-bg); + background: var(--te-common-bg-text-emphasize); } } } diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue index 71c237072..b6628a872 100644 --- a/packages/settings/styles/src/components/typography/TypographyGroup.vue +++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue @@ -520,7 +520,6 @@ export default { .typography-label { margin-right: -16px; line-height: 16px; - color: var(--te-common-text-secondary); .font-family-col { width: 118px; @@ -663,12 +662,15 @@ export default { } } + .typography-label { + color: var(--te-common-text-secondary); + } .is-setting { span { cursor: pointer; border-radius: 2px; color: var(--te-common-text-emphasize); - background-color: var(--ti-lowcode-style-setting-label-bg); + background-color: var(--te-common-bg-text-emphasize); } } } diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index 5e77d231f..43e152617 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -49,6 +49,7 @@ --te-common-bg-switch: var(--te-base-gray-50); // 开关默认色 #c2c2c2 --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0 --te-common-bg-popover: var(--te-base-gray-0); // 对话框/tooltip/popover背景 #fff + --te-common-bg-text-emphasize: var(--te-base-blue-140); // 强调性文字背景色 rgba(20, 118, 255, 0.1) // 通用间距 --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离,标题和列表之间的距离、一个独立元素的padding等等