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 }}
-
-
-
-
-
+
+ {{ 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等等