fix(style-panel): modify some reviews & color variables & Align lables

opentiny · Dec 9, 2024 · 9a03f5e · 9a03f5e
1 parent 3f64e3d
commit 9a03f5e
Show file tree

Hide file tree

Showing 15 changed files with 62 additions and 62 deletions.
diff --git 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
@@ -2,35 +2,31 @@
   <div class="tab-container">
     <div class="tabs-wrap">
       <tiny-button-group>
-        <tiny-button
-          v-for="(item, index) in uncollapsedOptions"
-          :key="item.label || item.icon"
-          :style="{ width: getItemWidth() + 'px' }"
-          :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
-          @click.stop="change(item)"
-        >
-          <span
-            :class="[
-              'label-text',
-              { 'border-right': collapsedOptions.length || index < uncollapsedOptions.length - 1 }
-            ]"
+        <div class="button-wrap" v-for="(item, index) in uncollapsedOptions" :key="item.label || item.icon">
+          <tiny-button
+            :style="{ width: getItemWidth() + 'px' }"
+            :class="['tab-item', { selected: picked === (valueKey ? item.value[valueKey] : item.value) }]"
+            @click.stop="change(item)"
           >
-            <span v-if="item?.label && !item?.content">{{ item.label }}</span>
-            <tiny-popover
-              v-if="item?.content"
-              :placement="placement"
-              :open-delay="1000"
-              :visible-arrow="false"
-              :content="item.content"
-              trigger="hover"
-            >
-              <template #reference>
-                <span v-if="item?.label">{{ item.label }}</span>
-                <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
-              </template>
-            </tiny-popover>
-          </span>
-        </tiny-button>
+            <span :class="['label-text']">
+              <span v-if="item?.label && !item?.content">{{ item.label }}</span>
+              <tiny-popover
+                v-if="item?.content"
+                :placement="placement"
+                :open-delay="1000"
+                :visible-arrow="false"
+                :content="item.content"
+                trigger="hover"
+              >
+                <template #reference>
+                  <span v-if="item?.label">{{ item.label }}</span>
+                  <svg-icon v-if="item?.icon" :name="item.icon" class="bem-Svg"></svg-icon>
+                </template>
+              </tiny-popover>
+            </span>
+          </tiny-button>
+          <span :class="[{ 'border-right': collapsedOptions.length || index < uncollapsedOptions.length - 1 }]"></span>
+        </div>
         <tiny-dropdown
           v-if="collapsedOptions.length"
           trigger="click"
@@ -198,13 +194,23 @@ const change = (item) => {
   .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);
 }
 </style>
diff --git 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
@@ -90,7 +90,7 @@
       :class="{ 'is-setting': isBorderSetting(), 'set-border-style': true }"
       @click="openSetting(BORDER_PROPERTY.Border, $event)"
     >
-      <span class="border-title">边框</span>
+      <span>边框</span>
     </label>
   </div>
   <div class="border-container">
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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等等