feat(style-panel): modify some icon color

opentiny · Nov 7, 2024 · 8249af4 · 8249af4
1 parent 650964e
commit 8249af4
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>