feat(theme): check color and fix

opentiny · Sep 25, 2024 · aec49fc · aec49fc
1 parent d847981
commit aec49fc
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 19 deletions.
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
@@ -513,6 +513,10 @@ export default {
   justify-content: space-between;
   position: relative;
   align-items: center;
+  padding-bottom: 8px;
+  &:last-child {
+    padding-bottom: 0;
+  }
   &.active {
     background: var(--ti-lowcode-meta-config-item-active-bg);
   }
@@ -617,7 +621,7 @@ export default {
     display: flex;
     width: 100%;
     align-items: center;
-    padding: 8px 0;
+
     .pro-underline {
       border-bottom: 1px dashed transparent;
       &:hover {

diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
@@ -234,11 +234,11 @@ export default {
   position: relative;
   width: 60px;
   height: 20px;
-  border: 1px solid var(--te-common-bg-container);
+  border: none;
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--te-common-bg-container);
+  background-color: var(--te-common-bg-switch);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }
@@ -252,12 +252,11 @@ export default {
   transition: all 0.3s;
   width: 16px;
   height: 16px;
-  background-color: #ffffff;
+  background-color: var(--te-common-bg-default);
 }
 
 .e__switch.e_is-checked .e__switch-core {
-  border-color: var(--ti-lowcode-base-blue-6);
-  background-color: var(--ti-lowcode-base-blue-6);
+  background-color: var(--te-common-bg-primary-checked);
 }
 
 .e__switch.e_is-checked .e__switch-core::after {

diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -134,7 +134,6 @@ export default {
 <style lang="less" scoped>
 .slot-list {
   display: flex;
-  margin: 5px 0;
   justify-content: center;
   align-items: center;
   .slot-name {
@@ -171,11 +170,11 @@ export default {
   position: relative;
   width: 40px;
   height: 20px;
-  border: 1px solid var(--te-common-bg-container);
+  border: none;
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--te-common-bg-container);
+  background-color: var(--te-common-bg-switch);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }
@@ -189,12 +188,11 @@ export default {
   transition: all 0.3s;
   width: 16px;
   height: 16px;
-  background-color: #ffffff;
+  background-color: var(--te-common-bg-default);
 }
 
 .e__switch.e_is-checked .e__switch-core {
-  border-color: var(--ti-lowcode-base-blue-6);
-  background-color: var(--ti-lowcode-base-blue-6);
+  background-color: var(--te-common-bg-primary-checked);
 }
 
 .e__switch.e_is-checked .e__switch-core::after {

diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
@@ -46,6 +46,7 @@
   --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
   --te-common-bg-component: var(--te-base-gray-1); // 白色背景-输入框等组件默认背景/面板背景色 #fff
   --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
+  --te-common-bg-switch: var(--te-base-gray-18); // 开关默认色 #c2c2c2
 }
 
 :root[data-theme='dark'] {
@@ -93,4 +94,5 @@
   --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
   --te-common-bg-component: var(--te-base-gray-1); // 深色背景-输入框等组件默认背景/面板背景色 #212329
   --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
+  --te-common-bg-switch: var(--te-base-gray-67); // 开关默认色 #4D4E52
 }
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
@@ -735,7 +735,8 @@
 
 // 22、开关
 .tiny-switch {
-  background-color: var(--te-common-bg-disabled); // 待确认是用背景色 还是线条色
+  background-color: var(--te-common-bg-switch);
+  border: none;
   &.tiny-switch-checked {
     background-color: var(--te-common-bg-primary-checked);
   }
@@ -747,7 +748,7 @@
 // 23、下拉菜单
 .tiny-dropdown {
   &__trigger {
-    color: var(--te-common-text-primary); // 待确认
+    color: var(--te-common-text-primary);
     &:not(&__caret-button):hover {
       color: var(--te-common-text-weaken);
     }

diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less
@@ -94,7 +94,7 @@ td {
 }
 
 #tiny-engine .svg-icon {
-  fill: #808080;
+  fill: currentColor;
 }
 
 // support for not webkit browser and won't override ::webkit-scrollbar-* selector

diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
@@ -43,4 +43,5 @@
 :root {
   --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5);
   --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-property-active-color: var(--te-common-bg-primary-checked);
 }
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
@@ -70,9 +70,9 @@
   // svgButton
   --ti-lowcode-component-svg-button-color: var(--ti-lowcode-common-text-color-2);
   --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-component-svg-button-hover-bg-color: transparent;
+  --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
   --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-component-svg-button-hover-bg-color: transparent;
+  --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);
 
   --ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-primary-color);
   --ti-lowcode-tabs-active-color: var(--ti-lowcode-common-primary-color);

diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less
@@ -43,4 +43,5 @@
 :root {
   --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5);
   --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-property-active-color: var(--te-common-bg-primary-checked);
 }
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
@@ -46,9 +46,9 @@
   // svgButton
   --ti-lowcode-component-svg-button-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-component-svg-button-hover-bg-color: rgba(0, 0, 0, 0.05);
+  --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
   --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-component-svg-button-active-bg-color: rgba(0, 0, 0, 0.05);
+  --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);
 
   // 关闭按钮
   --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色