From 1760b8b2cfbe063f2c5d6b4ea4e34c270efe648c Mon Sep 17 00:00:00 2001
From: betterdancing <liulinclear@163.com>
Date: Wed, 30 Oct 2024 23:27:50 -0700
Subject: [PATCH] feat(style-panel): fix the color variables;

---
 .../SliderConfigurator.vue                    |  4 +-
 .../TabsGroupConfigurator.vue                 | 48 +++++++++++--------
 .../components/background/BackgroundGroup.vue |  8 ++--
 .../src/components/inputs/ModalMask.vue       |  2 +-
 .../src/components/inputs/NumericSelect.vue   |  2 +-
 .../src/components/inputs/ResetButton.vue     |  4 +-
 .../styles/src/components/size/SizeGroup.vue  |  4 +-
 packages/theme/base/src/common.less           |  1 +
 8 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index 3e7b7a20a..d9119f84f 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -145,7 +145,7 @@ export default {
     height: 10px;
     border-radius: 50%;
     border: 0;
-    background-color: var(--te-base-bg-5);
+    background-color: var(--te-common-bg-default);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
     -webkit-transition: border-color 0.15s, background-color 0.15s;
     transition: border-color 0.15s, background-color 0.15s;
@@ -158,7 +158,7 @@ export default {
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;
-    background-color: var(--te-base-bg-5);
+    background-color: var(--te-common-bg-default);
   }
 }
 </style>
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index ed09addab..6df846e36 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -58,30 +58,36 @@
               </template>
             </tiny-popover>
           </span>
-          <tiny-dropdown-menu>
-            <tiny-dropdown-item v-for="item in foldsOptions" :key="item.label || item.icon" @click.stop="change(item)">
-              <span v-if="item?.label">{{ item.label }}</span>
-              <tiny-popover
-                v-if="item?.icon"
-                :effect="effect"
-                :placement="placement"
-                :visible-arrow="false"
-                :content="item.content"
-                trigger="hover"
+          <template #dropdown>
+            <tiny-dropdown-menu>
+              <tiny-dropdown-item
+                v-for="item in foldsOptions"
+                :key="item.label || item.icon"
+                @click.stop="change(item)"
               >
-                <template #reference>
-                  <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
-                </template>
-              </tiny-popover>
-            </tiny-dropdown-item>
-          </tiny-dropdown-menu>
+                <span v-if="item?.label">{{ item.label }}</span>
+                <tiny-popover
+                  v-if="item?.icon"
+                  :effect="effect"
+                  :placement="placement"
+                  :visible-arrow="false"
+                  :content="item.content"
+                  trigger="hover"
+                >
+                  <template #reference>
+                    <svg-icon v-if="item.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+                  </template>
+                </tiny-popover>
+              </tiny-dropdown-item>
+            </tiny-dropdown-menu>
+          </template>
         </tiny-dropdown>
       </tiny-button-group>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, watch, defineProps, defineEmits } from 'vue'
+import { ref, computed, watch, defineProps, defineEmits } from 'vue'
 import {
   Popover as TinyPopover,
   ButtonGroup as TinyButtonGroup,
@@ -121,8 +127,8 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const picked = ref(null)
-const uncollapsedOptions = ref(props.options.filter((option) => !option.collapsed))
-const collapsedOptions = ref(props.options.filter((option) => option.collapsed))
+const uncollapsedOptions = computed(() => props.options.filter((option) => !option.collapsed))
+const collapsedOptions = computed(() => props.options.filter((option) => option.collapsed))
 const foldsOptions = ref([])
 const selectedCollapsedOption = ref(null)
 const isCollapsedSelected = ref(false)
@@ -162,11 +168,11 @@ watch(
       updateOptionDisplay(value)
     }
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 )
 
 const change = (item) => {
-  if (picked.value === item.value) {
+  if (props.valueKey ? picked.value[props.valueKey] === item.value[props.valueKey] : picked.value === item.value) {
     return
   }
   isCollapsedSelected.value = Boolean(item.collapsed)
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 9a2efbf9a..0d4e2899a 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -429,8 +429,8 @@ export default {
     place-items: stretch;
     gap: 1px;
     border-radius: 2px;
-    border-top: 1px solid var(--te-base-invalidate-color);
-    background-color: var(--te-base-bg-5);
+    border-top: 1px solid var(--te-common-border-divider);
+    background-color: var(--te-common-bg-default);
     margin: 12px 0;
     .image-list-item {
       display: grid;
@@ -438,8 +438,8 @@ export default {
       gap: 8px 4px;
       height: 24px;
       align-items: center;
-      background-color: var(--te-base-bg-5);
-      border-bottom: 1px solid var(--te-base-invalidate-color);
+      background-color: var(--te-common-bg-default);
+      border-bottom: 1px solid var(--te-common-border-divider);
       pointer-events: all;
       font-size: 11px;
       font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index b1af6446e..88c5cbc3f 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -96,7 +96,7 @@ export default {
     border: 1px solid var(--ti-lowcode-tabs-border-color);
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
-    background-color: var(--te-base-bg-5);
+    background-color: var(--te-common-bg-default);
     overflow: auto;
     max-height: 100%;
     box-sizing: border-box;
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index d16b30228..2e88800f5 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -165,7 +165,7 @@ export default {
 
     .suffix-text {
       font-size: 12px;
-      color: var(--ti-lowcode-common-text-color-5);
+      color: var(--te-common-text-weaken);
     }
 
     &:hover {
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index 0d1156f3f..d31556119 100644
--- a/packages/settings/styles/src/components/inputs/ResetButton.vue
+++ b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -35,12 +35,12 @@ export default {
   max-width: 100%;
   border: 0;
   color: var(--te-common-text-primary);
-  border: 1px solid var(--te-common-text-primary);
+  border: 1px solid var(--te-common-border-active);
 }
 .reset-desc {
   display: block;
   padding: 8px 4px;
   text-align: center;
-  color: var(--ti-lowcode-radio-button-active-bg);
+  color: var(--te-common-text-description);
 }
 </style>
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 6fa8f5354..89ab3a67a 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -471,7 +471,7 @@ span {
       padding-left: 2px;
       margin-right: 2px;
       line-height: 28px;
-      color: var(--ti-lowcode-component-setting-panel-label-color);
+      color: var(--te-common-text-secondary);
     }
   }
 }
@@ -524,7 +524,7 @@ span {
         .size-label {
           padding-right: 5px;
           display: inline-block;
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
         }
 
         :deep(.tiny-input) {
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index 263a2e8d8..fe510a02b 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -16,6 +16,7 @@
   --te-common-text-inverse: var(--te-base-gray-1); // 主按钮上的文本色 #fff
   --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff
   --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff
+  --te-common-text-description: var(--te-base-gray-47); // 描述性文字 #9d9d9d
 
   --te-common-icon-primary: var(--te-base-dark-5); // 重要图标色 #191919
   --te-common-icon-secondary: var(--te-base-gray-43); // 图标默认色 #808080