From 8249af4a5c833f3231483535d2a90eacbabb72fe Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Thu, 7 Nov 2024 02:11:18 -0800
Subject: [PATCH] feat(style-panel): modify some icon color

---
 .../src/number-configurator/NumberConfigurator.vue |  6 ++++--
 .../TabsGroupConfigurator.vue                      | 14 ++++++++++++--
 packages/layout/src/DesignSettings.vue             |  3 ++-
 .../src/components/background/BackgroundGroup.vue  |  2 +-
 .../background/BackgroundImageSetting.vue          |  2 +-
 .../src/components/background/ImageSetting.vue     |  2 +-
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/configurator/src/number-configurator/NumberConfigurator.vue b/packages/configurator/src/number-configurator/NumberConfigurator.vue
index 80bb03642..3aefaa3fd 100644
--- a/packages/configurator/src/number-configurator/NumberConfigurator.vue
+++ b/packages/configurator/src/number-configurator/NumberConfigurator.vue
@@ -169,7 +169,9 @@ export default {
     :deep(.tiny-numeric__input-inner) {
       text-align: left;
     }
-
+    :deep(.is-disabled) {
+      background-color: var(--te-common-bg-default);
+    }
     &.is-without-controls {
       :deep(.tiny-numeric__input-inner) {
         padding-left: 8px;
@@ -203,7 +205,7 @@ export default {
         display: none;
       }
       .tiny-input.is-disabled .tiny-input__inner {
-        background: var(--ti-lowcode-input-bg);
+        background-color: var(--te-common-bg-disabled);
       }
     }
   }
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 26a463de9..e75f320ec 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -191,7 +191,6 @@ const change = (item) => {
   max-width: 210px;
   height: 24px;
   font-size: 12px;
-  background-color: var(--ti-lowcode-setting-style-tab-bg-color);
   display: flex;
   border-radius: 4px;
 
@@ -202,18 +201,21 @@ const change = (item) => {
       margin: 0;
       padding: 0;
       border: none;
-      background-color: var(--ti-lowcode-base-bg-5);
+      background-color: var(--te-common-bg-container);
       line-height: 14px;
       --ti-button-size-normal-min-width: 20px;
       --ti-button-size-normal-max-width: 80px;
+      color: var(--te-common-text-weaken);
 
       &:hover {
         background-color: var(--ti-lowcode-base-gray-101);
+        color: var(--te-common-text-primary);
         border-radius: 4px;
       }
 
       &.selected {
         background-color: var(--ti-lowcode-base-gray-101);
+        color: var(--te-common-text-primary);
         border-radius: 4px;
       }
     }
@@ -240,8 +242,10 @@ const change = (item) => {
       height: 24px;
       background-color: var(--ti-lowcode-base-bg-5);
       --ti-dropdown-text-color: var(--te-common-text-primary);
+      color: var(--te-common-text-weaken);
       &.selected {
         background-color: var(--ti-lowcode-base-gray-101);
+        color: var(--te-common-text-primary);
         border-radius: 4px;
       }
       :deep(.tiny-dropdown__title) {
@@ -270,12 +274,18 @@ const change = (item) => {
   padding: 8px 0px;
   margin: 0px 0px 0px 20px;
   background-color: var(--te-common-bg-default);
+  color: var(--te-common-text-weaken);
   z-index: 9999;
   box-shadow: 0 0 10px 0 var(--te-common-border-default);
   --ti-dropdown-menu-arrow-margin-top: 0;
 
+  :deep(.focusing) {
+    background-color: var(--te-common-bg-default);
+  }
+
   :deep(.tiny-dropdown-item__wrap) {
     padding: 4px 12px;
+    background-color: var(--te-common-bg-default);
 
     &:hover {
       background-color: var(--ti-lowcode-base-gray-101);
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 745503b42..4d06f7461 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -60,9 +60,10 @@ export default {
 
   .tabs-setting {
     position: absolute;
-    top: 10px;
+    top: 9px;
     right: 18px;
     line-height: 26px;
+    color: var(--te-common-icon-secondary);
     cursor: pointer;
   }
   .tiny-tabs {
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 11de8bb54..92bd6ba45 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -544,7 +544,7 @@ export default {
       font-size: 16px;
       padding: 4px;
       &:hover svg {
-        color: var(--ti-lowcode-toolbar-icon-color);
+        color: var(--te-common-icon-secondary);
       }
     }
   }
diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
index 83de165be..769aebffa 100644
--- a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
+++ b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue
@@ -6,7 +6,7 @@
         :options="state.typeLists"
         :modelValue="state.styleComponent"
         value-key="styleComponent"
-        label-width="49"
+        label-width="50"
         :effect="effect"
         :placement="placement"
         @update:modelValue="selectType"
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index a6bfa6cf6..86ac59701 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -22,7 +22,7 @@
     <tabs-group-configurator
       :options="BACKGROUND_SIZE_OPTIONS"
       :modelValue="state.sizeSelected"
-      label-width="65"
+      label-width="67"
       @update:modelValue="selectSize"
     ></tabs-group-configurator>
   </div>